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
As the mouse passes over the link, the background turns white (see Figure 10-3).
a {color: orange;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; background-color: white;}
a:active {color: red;}
Figure 10-3. Changing the background color in a hover state.

Example 10-3. Adding a background color to the hover state
NOTEMany 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).
a {color: orange;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; font-style: italic;}
a:active {color: red;}
Figure 10-4. Modifying the text style to italic in the hover state.

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).
a {color: orange; text-decoration: none;}
Figure 10-5. Look, Mano underlines!

Figure 10-6. The link, visited, hover, and active states, with underlining in the hover state.
