saila.com

How do I style links?

A linked anchor (a) element has a series of pseudo-classes that can be applied to it (:link and :visited) in addition to :active and :hover. For CSS-1 style sheets, this is the best way to style links:

a:link { background: inherit; color: #00f; }
a:visited { background: inherit; color: #c09; }
a:hover { background: #ff0; color: inherit; }
a:active { background: inherit; color: #f00; }

But CSS-2 allows :active and :hover to be applied to any element, so the above can be written as:

a:link { background: inherit; color: #00f; }
a:visited { background: inherit; color: #c09; }
a:link:hover, a:visited:hover { background: #ff0; color: inherit; }
a:link:active, a:visited:active { background: inherit; color: #f00; }

(the above works in most fifth-generation browsers).

By attaching :active and :hover to :link and :visited, you can:

• create unique hover effects for visited links, for example,
• ensure non-linked anchors (those with and id and/or name) do not inherit style rules intended for just a hovered link.

For more on this read David Baron’s in-depth explanation.