Spring Into HTML and CSS

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).

Figure 10-3. Changing the background color in a hover state.

You can ...