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.
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
[View full width]
You'll notice that I've styled the anchor element, too. Because the a is an element selector, you can use it to set defaults that will then be inherited. Pseudo classes are not inherited, for logical reasons: The whole point is to be able to make changes in each state. 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.
body {font: 14px Georgia, Times, serif; color: white; background-color: black;}
h1 {font: 22px Arial, Helvetica, sans-serif; color: orange; text-decoration: underline;}
h2 {font: italic 20px Georgia, 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;}
Figure 10-1. Viewing link and hover states in the context of a document.
[View full size image]

Figure 10-2. Link, visited, hover, and active states.
