SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to declare <a> styling?

    Hello,

    I've read a couple of articles that don't agree with each other about css and <a>. Some say you shouldn't use such thing as:

    Code:
    a {
      ...definitions
    }
    and argue that you shoudl do something like:

    a:link {
    ..definitions
    }
    Other articles say it's cool. Looking at css gurus stylesheets, I realized that both approcahes were used.

    Is there a better way?

    Regards,

    -jj.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    In my personal experiences i always use the pseudo selectors with anchor elements as the a selector by itself to me isn't as informative as it should be in my opinion. At the end of the day every coder has their own style of how they like to do things and for me i never use the a selector by itself.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    For me CSS as applied to markup is broken into two things... Everything that's the same, and everything that is different.

    Stating JUST "a" alone is as bad as stating a:pseudo for each and every state... one hits all anchors, the other only hits specific states, when in most cases you want BOTH behaviors.

    "a" alone is great for hitting all the LIKE values for all the states so you don't restate them over and over again for no reason. Font-size, font-family, text-decoration, paddings... Hit those with "a" alone.

    The pseudo-states should then be used for when things are DIFFERENT -- a different color to indicate it's visited, different background for active, focus and hover... etc, etc...

    Really I see no reason for a:link to ever be used -- Hit A so you can nab all the states, then use the other psuedo's to say the values that are DIFFERENT.

    Anything more than that is probably just bloated code. I mean I've lost count of how many times I've seen bloated rubbish like:

    Code:
    a:link {
    	display:inline-block;
    	padding:8px 16px;
    	text-decoration:none;
    	font-weight:bold;
    	font-family:arial,helvetica,sans-serif;
    	font-size:14px;
    	line-height:16px;
    	color:#000;
    }
    
    a:visited {
    	display:inline-block;
    	padding:8px 16px;
    	text-decoration:none;
    	font-weight:bold;
    	font-family:arial,helvetica,sans-serif;
    	font-size:14px;
    	line-height:16px;
    	color:#800;
    }
    
    a:active {
    	display:inline-block;
    	padding:8px 16px;
    	text-decoration:none;
    	font-weight:bold;
    	font-family:arial,helvetica,sans-serif;
    	font-size:14px;
    	line-height:16px;
    	color:#F00;
    }
    
    a:focus {
    	display:inline-block;
    	padding:8px 16px;
    	text-decoration:none;
    	font-weight:bold;
    	font-family:arial,helvetica,sans-serif;
    	font-size:14px;
    	line-height:16px;
    	color:#F00;
    }
    
    a:hover {
    	display:inline-block;
    	padding:8px 16px;
    	text-decoration:none;
    	font-weight:bold;
    	font-family:arial,helvetica,sans-serif;
    	font-size:14px;
    	line-height:16px;
    	color:#F00;
    }
    Doing the job of:
    Code:
    a {
    	display:inline-block;
    	padding:8px 16px;
    	text-decoration:none;
    	font:bold 14px/16px arial,helvetica,sans-serif;
    	color:#000;
    }
    
    a:visited {
    	color:#800;
    }
    
    a:active,
    a:focus,
    a:hover {
    	color:#F00;
    }

  4. #4
    SitePoint Zealot FaridHadi's Avatar
    Join Date
    Nov 2008
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As you probably already know, using only a {...} will style all links the same and by using the pseudo-classes you can style the different states differently. i.e.

    Code CSS:
    a:link {color:#FF0000;}      /* unvisited link */
    a:visited {color:#00FF00;}  /* visited link */
    a:hover {color:#FF00FF;}  /* mouse over link */
    a:active {color:#0000FF;}  /* selected link */

    Also, if I'm not mistaken, I believe a:link won't style destination anchors, i.e. <a name="foobar"> (someone please correct me if I'm wrong about this )

    Basically, if you want all your links styled the same, whether they're visited or hovered etc., you can just use a {...}, otherwise you use the pseudo-classes.

    Hope that helped

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by FaridHadi View Post
    Also, if I'm not mistaken, I believe a:link won't style destination anchors, i.e. <a name="foobar"> (someone please correct me if I'm wrong about this )
    You are correct

    That's the problem with using a{} is that it also hits named anchors but of course these days you don't really need named anchors as ids will suffice as targets without the need for the extra elements. It's also only really a problem if you have set all anchors to display:block or added borders anyway as otherwise nothing will really show.

    There is a bug in IE6 also in that pseudo classes get more weight an in the following example you will find that .test1 gets a hover style in IE6 only when it shouldn't.

    Code:
    a {
        color:yellow;
        background:red
    }
    a:hover {
        background:blue
    }
    a.test1 {
        color:black;
        background:white
    }
    Code:
    <p><a href="http://www.google.com">Test link</a></p>
    <p><a class="test1" href="http://www.google.com">Test link 1</a></p>
    However as long as you remember to redefine hover and visited states then using a{} should be ok and more concise (assuming named anchors aren't an issue).

    Code:
    a.test {
        background:yellow;
        color:red;
        width:100px;
        height:100px;
        margin:0 0 10px;
        display:block;
    }
    a.test:visited{color:#000}
    a.test:hover,
    a.test:active,
    a.test:focus{background:blue}

    Link specificity is explained here.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I am with Shadow on this one.
    notice that you could use a:link{} to have other states of a NOT inherit some property. a:link{display:block;} Does't make a:hover display as a block.

    But without going into too convoluted an example, you can use :link to add a margin of specificity over simple a{}.

    It may so happen,where you have written a rule of the same specificity as another. Only a poor example comes to mind, but hopefully it will sever to illustrate what I mean ( yes, it's bad practice to have links in different colors on different elements, but it's just an example), lets say :
    Code:
    .story a {color: orange}
    .content a {color: pink}
    p a {color: green}
    <div class="content">
        <div class="story"> 
          <p><a href="#">some junk</></p>
      </div>
    </div>
    you may have intended the links in .story class element to be orange, but they will be pink. This is a specificity conflict. The easy way to fix this, actually is to change the order of your CSS ( put the .story rule after .content rule, in this case it even makes sense). But what if that is not an option?

    .story a:link {color: orange}
    .content a {color: pink}
    p a {color: green}

    Or let say, in that situation, you wanted links in paragraphs in a standard color, whether they were loose in .content or .story...

    .story a {color: orange}
    .content a {color: pink}
    p a:link{color: green}

    this is not to be confused with the bug in IE that Paul mentioned. I was simply bringing up the point that a:link weighs more than a, and that can be useful if used right.


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
  •