Spring.Into.HTML.and.CSS [Electronic resources]

Modifying Link Styles

Simple, wasn't that? You'll dig a little deeper now and make some changes to the way your links look. Typically, most modifications are made for the hover state, but you can style for all states.

A popular approach is to add a background color on hover (see Example 10-2).

Example 10-2. Adding a background color to the hover state

a {color: orange;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; background-color: white;}
a:active {color: red;}

As the mouse passes over the link, the background turns white (see Figure 10-3).

You can also modify the text weight by making it bold, or change its style and make it italic (see Example 10-3).

Example 10-3. Adding a background color to the hover state

a {color: orange;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; font-style: italic;}
a:active {color: red;}

NOTE

Many usability specialists suggest avoiding major changes in link state styles because they feel it's disconcerting. Some very rigid usability experts advocate not even styling links and leaving them with their default colors and underlines. Most designers do not agree with the more rigid approach, though, and prefer to use link styles to enhance their design work. The main concern is ensuring that there's some way for a visitor to know that the link is, in fact, a link.

As the mouse passes over the link, the background turns italic (see Figure 10-4).

Perhaps the most popular modification is removing the link underline. You can do this for all states with the text-decoration: none; declaration:

a {color: orange; text-decoration: none;}

As I mentioned, common styles to all states should be placed in the anchor element so you can tap into inheritance. There's no need to add this declaration to any of the pseudo selectors because they'll inherit the rule (see Figure 10-5).

You can mix and match rules, too. Some designers like to have the underline appear only in the hover state. To do that, you simply add the text-decoration: underline; declaration to the :hover selector, which overrides the inherited value in the anchor because of the specificity of the selectors (see Chapter 7, "Using CSS," for more details on specificity). Figure 10-6 shows the links without underlines until the hover state is activated.