Using CSS to control color and background color of hyperlinks

Discussion in 'CSS' started by larryparker, Dec 18, 2006.

  1. #1
    I'm really frustrated by what seems to be a ridiculously easy task, and yet....

    I'm trying to create a web page with a series of entries, each entry linked to another page.
    I want each entry to appear as white text against a black background, but with the text turning blue when the mouse hovers over it.

    This is what I've tried so far:

    <style type="text/css">
    span a:link{color:white; background-color:black}
    span a:hover{color:blue; background-color:black}</style>

    with the <a> tag being placed inside of the <span> tag. (<span><a>ENTRY</a></span>)

    This gives me what I want when I hover, but otherwise I get the browser default (purple text against no background, as though the "span a:link{}" part of the code were being completely ignored. So now I'm wondering if what I'm trying to do can even be done.

    I also tried this using an <h1> tag in place of the <span> tag, but with no change.

    Any suggestions???
     
    larryparker, Dec 18, 2006 IP
  2. Lichurec

    Lichurec Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi there :)
    a:link attribute will work only for unvisited links. Your problem is probably caused by the fact, that you have already visited that linked address some time ago ;) and your web browser still remembers that.

    I'd suggest changing that code into:
    <style type="text/css">
    span a{color:white; background-color:black} [b][1*][/b]
    span a:hover{color:blue;} [b][2*][/b]
    </style>
    Code (markup):
    which will cause that:
    [1*] each and every kind of links (unvisited, visited and hovered) will have "white" (text) color and "black" background-color
    [2*] only hovered links will have the (text) color changed to "blue" (all other attributes are set by [1*] and remain unchanged)

    Hope that helps!

    Kindly regards,
    L.
     
    Lichurec, Dec 18, 2006 IP
  3. larryparker

    larryparker Guest

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Superb !!!

    This worked like a charm.

    Thank You, Lichurec. You're a LifeSaver.

    :)
     
    larryparker, Dec 18, 2006 IP
  4. Austars

    Austars Active Member

    Messages:
    1,437
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    95
    #4
    I thought I knew the CSS basics but I never knew that, thanks for the info!
     
    Austars, Dec 18, 2006 IP
  5. Lichurec

    Lichurec Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    @ larryparker - I try my best ;]

    @ Austars - It's all in the W3C specification =]
     
    Lichurec, Dec 18, 2006 IP
  6. ketan9

    ketan9 Active Member

    Messages:
    548
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    58
    #6
    Me 2, I never knew you could pass arguments in "[]", cool stuff..
     
    ketan9, Dec 18, 2006 IP
  7. Austars

    Austars Active Member

    Messages:
    1,437
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    95
    #7
    Thanks, that site has some CSS stuff I hadn't ever even heard of ;)
     
    Austars, Dec 18, 2006 IP
  8. Lichurec

    Lichurec Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Paddom?
    [1*] and [2*] are just ways of numbering my "footnotes"
    Exact code looks like:
    <style type="text/css">
    span a{color:white; background-color:black}
    span a:hover{color:blue;}
    </style>
    Code (markup):
    As for the css - each and every child element (and in this case - we may consider a:link pseudoclass as a child of whole a family) will inherit previously specified attributes or will inherit web browser default values - if none is provided in CSS
     
    Lichurec, Dec 18, 2006 IP
  9. Lichurec

    Lichurec Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Just remember that pseudo-classes are NOT widely recognisable by web browser (especially the one with big e) ;)

    let me just mention that :hover pseudo-class won't work in Ie for any other element than link ( <a href=".."..>..</a> ) and should be available at least for DIVs or SPANs (just have a look at my website in both: FX & Ie)

    L.
     
    Lichurec, Dec 18, 2006 IP
  10. ketan9

    ketan9 Active Member

    Messages:
    548
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    58
    #10
    :eek: Hmm, that's why I was wondering that why I have never seen it like that... My mistake, that I took footnotes as arguments :rolleyes: Oh well, mistakes happen...
     
    ketan9, Dec 19, 2006 IP
  11. Lichurec

    Lichurec Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #11
    We all re are only humans.. er.. well.. at least most of us ;}

    Anyway - I'm glad we've cleared that out ;)

    Kindly regards,
    l.
     
    Lichurec, Dec 19, 2006 IP