SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    West Chester, PA, U.S.A.
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a {...} vs. a:link {...}

    I am reading (an thoroughly enjoying) the book "More Eric Meyer on CSS". But there is one thing he keeps doing which seems backward from any other book or tutorial.

    When he styles a link, for example, to take away the underline, he does this:

    a {text-decoration:none;}

    Every other resource i've read says to do this:

    a:link {text-decoration:none;}

    Is there a difference?

    To add to my confusion, in this book, on p. 106, he does something like this:

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

    This is the first time i've seen him use a:link. His other book never used a:link. Here he is using it along w/ "a".

    Can someone please help clarify what's going on here?

    Thanks so much!

    John

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnb41
    When he styles a link, for example, to take away the underline, he does this:

    a {text-decoration:none;}

    Every other resource i've read says to do this:

    a:link {text-decoration:none;}

    Is there a difference?
    I could be wrong and someone correct me if I am, but a{..} is defining the anchor tag, the actual element in html. a:link{...} is styling the link effect, called a pseudo class because there's no link element in html, you can't directly style it.

    Quote Originally Posted by johnb41
    To add to my confusion, in this book, on p. 106, he does something like this:

    a {text-decoration:none;}
    a:link{color:#ffffff;}
    Again, he's giving the anchor tag itself text-decoration of noe while giving the pseudo class link a color of white.
    Ryan Butler

    Midwest Web Design

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Haarlem, the Netherlands
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnb41
    a {text-decoration:none;}
    a:link {text-decoration:none;}

    Is there a difference?
    The difference is this:
    With a {text-decoration: none;} you'll set all of the <a> attributes to text-decoration:none;
    but you can use a:link to only change the unclicked links.

    The other options are:
    a:visited (visited links)
    a:active (active links)
    a:hover (when holding mouse above link)

    Parts of the font/decoration you want to apply to all <a> ellements, can be declared with a { }

    The part that should be different (e.g. color) should be declared the other way.


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
  •