Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing Multiple Link Colors with a style sheet

    Is it possible to have 2 or more 'Link Styles' controlled by 1 style sheet?

    ex:

    Here are attributes for the links on a page.

    <style>

    A:ACTIVE
    {
    font-family : Verdana;
    font-size : 10px;
    color : #CCCCCC;
    text-decoration : none;
    ; font-weight: normal}

    A:LINK
    {
    font-family : Verdana;
    font-size : 10px;
    color : #CCCCCC;
    text-decoration : none;
    ; font-weight: normal}

    A:VISITED
    {
    font-family : Verdana;
    font-size : 10px;
    color : #CCCCCC;
    text-decoration : none;
    ; font-weight: normal}

    A:HOVER
    {
    font-family : Verdana;
    font-size : 10px;
    color : #F14A12;
    text-decoration : underline;
    ; font-weight: normal}

    </style>

    However, if I want to control how 2 or more links look on the same page with a style sheet and NOT using a font tag, is this possible?
    Last edited by TNeston; 11-12-2002 at 06:52 AM.

  • #2
    New Coder
    Join Date
    Oct 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tested this a few different ways and it didn't seem to work.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style type="text/css">
    a.blue.hover {font:bold 12px tahoma;color:blue}
    a.red.hover {font:bold 12px tahoma;color:red}
    </style>

    </head>

    <body>
    <a class="blue" href="http://yahoo.com">Yahoo!</a>
    <a class="red" href="http://cnn.com">CNN</a>
    </body>
    </html>

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry...I deleted because I wanted to find you another flexible way to do this. The link,active,visited, and hover have to go in a certain order to work.

    Here ya go:

    <html>
    <head>
    <style type="text/css">
    a.style1:link, a.style1:active, a.style1:visited {font:bold 14px tahoma;color:blue}
    a.style1:hover {font:bold 14px tahoma;color:#ffff00; text-decoration:overline underline;}
    a.style2:link {font:normal 12px verdana;color:red}
    a.style2:active {font:normal 12px verdana;color:black}
    a.style2:visited {font:normal 12px verdana;color:green}
    a.style2:hover {font:bold 12px verdana;color:blue}

    </style>
    </head>
    <body bgcolor=#000000>

    <a class="style1" href="http://yahoo.com">Yahoo!</a>
    <br>
    <a class="style2" href="http://cnn.com">CNN</a>
    </body>
    </html>
    Last edited by zoobie; 11-12-2002 at 07:27 AM.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice....


    Ionsurge.
    http://www.mudsplat.com - Web design, print, and marketing solutions.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    .hover pseudo class

    That, and the :hover pseudo class is first defined in CSS level 2 and is therefore not supported by all browsers, at least not all versions.
    By the way, W3Schools states that :hover has to be preceded by :link and :visited, and that :active must follow :hover. The order should therefore be:

    a:link
    a:visited
    a:hover
    a:active

    Edit: Replaced the dots with colons, the way i't's supposed to be...
    Last edited by ronaldb66; 11-13-2002 at 08:34 AM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes...I read that somewhere, too...but then why does this style work?

    <style type="text/css">
    a.style1:link, a.style1:active, a.style1:visited {font:bold 14px tahoma;color:blue}
    a.style1:hover {font:bold 14px tahoma;color:#ffff00;}
    </style>

    I guess the browser figures it out.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #7
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by zoobie
    I guess the browser figures it out.
    in IE you barely have to get anything right for it to work.
    html is not strict, xhtml on the other hand.....

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Originally posted by cg9com


    in IE you barely have to get anything right for it to work.
    That makes it really appealing for the webmasters and viewers alike.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #9
    New Coder
    Join Date
    Oct 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank You Everyone, for making my life easier.

    Tom


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •