Links

Links have a substantial difference when it comes to CSS classes. There are 5 important styling classes that your browser superimposes on just one link. You have to overwrite each of these classes and in a particular order. Don’t stress, we will go through it together.

CSS Link Classes

• a:link – sets the standard link styling
• a:visited – sets the styling for a link that has been previously visited
• a:hover – when a user hovers over a link, this sets that link’s new style
• a:active – sets style when link is activated (clicked)
• a:focus – sets style when the link has focus (often neglected)

<style type=”text/css”>
a:link{color:#09F;}
a:visited{color:#999;}
a:hover{color:#CCC;}
a:active{color:#333;}
a:focus{color:#03F;}
</style>

<a href=”#”>blah blah</a>

Ack! I hate this overpowering my link’s classes, but I will bear it just for you on this tutorial. You might also be a little bit freaked out by the sudden by the one line per class formatting. I just did the tight formatting to save space (I am a big fan of wide open formatting and indentations). Can we get to talking about the code? Certainly, let’s use my link to see what’s happening.

In its normal state (a:link), we see it shows a color of #09F. Now, as we hover over it the a:hover class imposes a color of #CCC on the link. Next up, left click and hold it down on the link. This makes a:active take control, which tells the link’s color to turn #333. Now, give it a real click and look at it after the click. a:visited took the reins and said make its color property #999. Last, but not least, we have the less common a:focus. To see it in action try using the tab key to get to the link. You might not have known that this existed, but it most certainly does.

References

• CSS Link Property Reference (EchoEcho)
• The Neglected Focus Property (NemesisDesign)
• Overpowering The Border (CSS-Tricks)
• More CSS Link References (YourHtmlSource)