HTML and CSS [Electronic resources]

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]

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;} 

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.

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

[View full size image]

NOTE

For link effects to work properly, they must appear in this order: link, visited, hover, active. Any other order will cause inconsistent behavior. Just remember the order of LVHA, or, as a popular mnemonic in the industry goes, LoVe/HAte.

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

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

You might not be able to see the color until you try it out in a browser, but you will notice the changesespecially note the marquee surrounding the activated link.