12.5 Creating Custom Link Styles

NN 6, IE 4

12.5.1 Problem

You want links on the page to respond to rollovers and clicks differently than the default browser behavior.

12.5.2 Solution

Take advantage of CSS pseudo-classes for a elements that let you define separate style sheet rules for various states of a link. The following example displays the text of an a element in a dark reddish-brown except when the user clicks down on the link, at which point the background and text color invert. Also, the link does not display the traditional underline except while the cursor passes atop the link:

<style type="text/css">
a:link {color:#993300; background-color:#ffffff; text-decoration:none}
a:visited {color:#993300; background-color:#ffffff; text-decoration:none}
a:active {color:#ffffff; background-color:#993300; text-decoration:none}
a:hover {text-decoration:underline}
</style>

12.5.3 Discussion

The a:link, a:visited, and a:active CSS pseudoclasses for a elements are modern versions of old attributes of the <body> tag. The old attributes controlled nothing more than the color of a link in each of three states. But the CSS version allows far more control over the appearance of the link's text and other environment factors.

A new state, represented by the a:hover pseudoclass, is a simplified way of implementing style changes during what scripters might consider to be a mouseover event. But no scripting is needed. It's this same behavior that allows unscripted image rollovers in some situations (as described in Recipe 12.2). The only imperative for using genuine onmouseover event handlers is that they work in older browsers than those that support the CSS pseudoclasses (IE 4 or later, Opera 5 or later, and NN 6 or later).

Note a peculiarity with IE for Windows and the a:active pseudoclass. This browser has a different meaning for active. While other browsers treat this state as meaning only while the mouse button is pressed on the element, IE for Windows considers an a element that has focus to be active. Therefore, if a user clicks on a hyperlink, the a:active style rule remains in effect until the link loses focus. It also means that if a user presses the Tab key enough times to bring focus to the link, the link's appearance is under the a:active style rule.

A valid user interface question occurs when contemplating the hiding of a link's traditional underline decoration. Some page designers object to the default appearance on aesthetic grounds in that the bold color and underline distract the user from the content, destroy the designer's other color schemes, and may encourage users to jump out of the site too quickly. Rather than omit external links (at the risk of giving the appearance of not being a good Net citizen), the designers can, in a sense, disguise the links.

Your decision about link styles will most likely be influenced by the nature of your audience. An unsophisticated audience for a very public web site may not catch on quickly enough that your subtly hued, nonunderlined text segments are links, and may not even find some of your own site's gems. A web-savvy audience, on the other hand, may instinctively know where to expect links and will catch on quickly to your style scheme. In the end, consistency in your approach�throughout the site�is an important step toward users accepting your design.

12.5.4 See Also

Recipe 12.2 for onmouseover image swapping.

[ Team LiB ]