Working with Link States

First things first! Several states for links are considered standard for all browsers:

• link The link state is the state of the link before being activated.

• visited The visited state occurs after the link has been visited.

• hover Hovering is the state of the link as you hover the mouse pointer over the link.

• active The active state occurs as you are clicking on the link to activate it.

CSS categorizes the link and visited states as pseudo classes, and the hover and active states as dynamic pseudo classes. You can see how hover and active are dynamic: They require some kind of action from the user to work. The link and visited states occur before and after interaction.

You might also remember from the discussion in Chapter 9, "Styling Text," the pseudo element selectors :first-child and :first-line. All pseudo selectors take the preceding colon. So, the corresponding selectors available to style links are :link, :visited, :hover, and :active.

Example 10-1 sets up some general styles for the document, as well as styles for all link states.

Example 10-1. Styling links using pseudo class and dynamic pseudo class selectors

 Times, serif; color: #ccc; background-color: black;
 text-transform: lowercase;} 
a {color: orange;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia;}
a:active {color: red;}

You'll notice that I've styled the anchor element, too. Because the a However, there will be commonalities, so those common styles can be set in the anchor, with the independent styles in the selectors for each state.

Figure 10-1 shows the document to which I've applied these styles. You'll notice my cursor hovering over a link so you can visualize the change.

Figure 10-1. Viewing link and hover states in the context of a document.

I enlarged the link text to demonstrate more clearly the appearance of each state (see Figure 10-2).