Styling links and anchors with CSS by example

Problem:

How do I style anchors and links with CSS? Additionally, how do I override these styles?

Examples:

The examples below in this post will demonstrate how to use the most common pseudo-classes of website links: link, visited, hover, active.

Here's what the pseudo-classes mean:

Selector	Interpretation
:link	all unvisited links
:visited	all visited links
:active	the active link
:hover	the link selected on mouseover

Link defaults (covers all links in the document):

:link { color:blue; text-decoration:underline; }
:visited { color:green; text-decoration:underline; }
:link:hover { color:blue; text-decoration:none; }
:link:active { color:blue; text-decoration:underline; }

Anchor defaults (covers all links embedded in anchors):

a:link { color:blue; text-decoration:underline; }
a:visited { color:green; text-decoration:underline; }
a:hover { color:blue; text-decoration:none; }
a:active { color:blue; text-decoration:underline; }

Override (covers all links embedded in anchors with the class 'overrideClass'):

a.overrideClass:link { color:red; text-decoration:none; }
a.overrideClass:visited { color:orange; text-decoration:none; }
a.overrideClass:hover { color:red; text-decoration:underline; }
a.overrideClass:active { color:red; text-decoration:underline; }

References:

• http://www.w3schools.com/css/css_pseudo_classes.asp
• http://www.cssbasics.com/chapter_11_css_anchors_links_pseudo_classes.html
• http://dbaron.org/css/1999/09/links
• http://blogs.x2line.com/al/articles/159.aspx