SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot amri's Avatar
    Join Date
    Dec 2002
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Defining different color for a:link

    Can I define different color for link (as well as hover and visited) in css? How? I have a page that mostly in white background but also a dark color in the left side. I can't find a color for link, hover, and visited link that fit in both white and dark background.

    I tried to create 2 different external css file with different set of color for link and linked to my page. One applied to white background and other to dark background. But only one that seem to work: the one that deined first in <HEAD> section. Help please?

  2. #2
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a separate class for one of the 2.
    e.g:
    a:visited {color: green;}
    a:link {color: green;}
    a:hover {color: blue;}
    a.xx:visited {color: blue;}
    a.xx:link {color: blue;}
    a.xx:hover {color: red;}

    Then in the body:
    <a href="#">This is the usual link</a>
    <a class="xx" href="#">This is the other link</a>

    Just but the class="xx" to the links that you want to be diferent than the links of the rest of the document.

    You can also do this:
    style:
    a:visited {color: green;}
    a:link {color: green;}
    a:hover {color: blue;}
    .xx a:visited {color: blue;}
    .xx a:link {color: blue;}
    .xx a:hover {color: red;}

    body:
    <a href="#">This is the usual link</a>
    <div class="xx">
    <a href="#">This is the other link</a>
    <a href="#">This is the other link</a>
    <a href="#">This is the other link</a>
    </div>

    and there are more ways.

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <note>

    The anchor pseudo-classes should ideally be placed in the order:
    Code:
    a:link {}
    a:visited {}
    a:hover {}
    a:active {}
    Other orders can cause parts of the set to fail on some browsers.

    </note>
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes the logical order is important. Also if you use css to achieve other kind of styling, like backgrounds, you could use the classname of the block element to help out with the different font-colors:

    Code:
    .left {background-color: black}
    .right {background-color: white}
    
    .left a:link {color: white}
    .left a:visited {color: white}
    .left a:hover {color: yellow}
    .left a:active {color: white}
    
    .right a:link {color: black}
    .right a:visited {color: black}
    .right a:hover {color: blue}
    .right a:active {color: black}
    Your html could for example be something like this:
    Code:
    <div class="left"><a href="file1.html">Link</a></div>
    <div class="right"><a href="file2.html">Link</a></div>
    Just a thought..

    Ove

  5. #5
    SitePoint Zealot amri's Avatar
    Join Date
    Dec 2002
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all replies. I got it now.


Bookmarks

Posting Permissions

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