Remember to Love / Hate Links

on August 23rd, 2006 | Filed under CSS Tips

Ever wondered how to define styles for Hyperlinks ?

Well. There are four different selectors for a hyperlink.

You would normally see this at the top of the stylesheet.

a:link {text-decoration:none;color:#ff0000}
a:visited {text-decoration:none;color:#0000ff;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

The first line defines that normal unvisited links will have ‘no underline’, and will look ‘red’ in color.
The second line says when a link is already visited by the user, it should display in ‘blue’ color with ‘no underline’.
The third line says if the user is moving the mouse over this link, show an underline.
The fourth one says to do the same thing as the hover, when the user clicks on it. ‘active’ depicts that fraction of second that the user actually clicks on the link.

In order for these definitions to work as intended in most browsers, they have to be in the same order as we have defined here.

Remember ‘LoVe’ should come before ‘HAte’
This shortcut I found it first on the book ‘Web Standards Solutions’ by Dan Cederholm.

Thats all folks, for now.

No Comments

Leave a Reply