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 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts

    More than one color for links in CSS?

    Hi

    I'm using the following code to color my links, plus kill the underline
    ------------------------------
    a {
    text-decoration : none; font-size:9px;
    }

    a:link {COLOR: #ffffff; text-decoration: none;}

    A:visited {
    COLOR: #ffffff; text-decoration: none;
    }
    A:hover {
    COLOR: #ffffff; font-weight:bold; text-decoration: none;}
    ---------------------------------

    It works great, but now I have a need to use black colored links on a part of the page. I tried just making the links black in the html code, but the css style is overiding it.

    How do I have two link color styles?

    Cheers

    Shaun

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You should specify a certain portion of your page where you want the link to take that effect. You may contain it in a div and give it an id or a class so that when you used it in CSS. You could specify:
    See this code for example:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Title Goes Here</title>
    <style type="text/css">
    .contain a
    {
    text-decoration : none; font-size:9px;
    }
    .contain a:link
    {
    COLOR: #ffffff; text-decoration: none;
    }
    .contain a:visited
    {
    COLOR: #ffffff; text-decoration: none;
    }
    .contain A:hover
    {
    COLOR: #ffffff; font-weight:bold; text-decoration: none;
    }
    a
    {
    color:#000;
    text-decoration:none;
    font-family:tahoma;
    font-size:10pt;
    }
    a:hover
    {
    color:#0000ff;
    }
    
    </style>
    </head>
    <body>
    <div class="contain" style="background:#222;width:50&#37;;">
    <a href="#">Home</a>
    <br/>
    <a href="#">Links</a>
    <br/>
    <a href="#">Gallery</a>
    <br/>
    <a href="#">Contact Us</a>
    <br/>
    <a href="#">Details</a>
    <br/>
    <a href="http://www.yahoo.com">Yahoo</a>
    </div>
    <hr width="50%" align="left">
    Links beyond this line is different
    <br/>
    <a href="#">Home</a>
    <br/>
    <a href="#">Links</a>
    <br/>
    <a href="#">Gallery</a>
    <br/>
    <a href="#">Contact Us</a>
    <br/>
    <a href="#">Details</a>
    <br/>
    </body>
    </html>
    See if it helps

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're a champ, Rangana - fixed it right up!

    Just nominated you mate.

    Shaun

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    A note: you shouldn't really change the actual size of the text (e.g. the boldness) on links, because it sends the rest of the page flying, and you don't need to specify text-decoration: none; three times: it's inherited.


  •  

    Posting Permissions

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