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)
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.