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 href=”#”>blah blah</a>

blah blah

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.


If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Share on StumbleUpon
Digg this
Tweet about this on Twitter
Share on Reddit

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.