HTML & CSS: The Good Parts

Styling Links

As the elements that most readily respond to user interactivity—even without the benefit of scripting—links deserve a proportionally large amount of a stylist’s attention.

When rendered with user agent styles, links suffer from two serious flaws:

• The colors assigned to links by default are at worst unattractive, and at best ill-suited to most color palettes.

• As inline-level elements, links only occupy as much canvas area as needed. If there’s no graceful way to fill important links with ideal amounts of content, they can be difficult for users to find and activate, or disruptively large and ragged.

Because of their interactivity, links require greater effort to style than most elements. Much of this effort relies on rules written around pseudoclasses.

Link Pseudoclasses

Because links can express several states, it’s logical but not really feasible to assign styles to links with the element selector alone.

To account for the various link states, CSS offers the :link, :visited, :hover, and :active pseudoclasses. The first two describe usable links and those that point to already-visited destinations, respectively; the latter two describe the link under the mouse pointer, and that same link while the primary mouse button is depressed.

In a stylesheet, selectors with common scope that include these pseudoclasses should apply them in the order :link–:visited–:hover–:active, all preceded by the analogous rule that lacks pseudoclasses. I suggest the following mnemonic: ...