• Choose a category
• All
• Classic-Fiction

3. Make a style for hovered links.

The a:hover style is applied to the link only when the mouse is hovering over the link. As soon as the mouse leaves the link, the style reverts to the standard or visited style, as appropriate.

Best link practices

Link styles have some special characteristics. You need to be a little bit careful how you apply styles to links. Consider the following issues when applying styles to links:

♦ The order is important. Be sure to define the ordinary anchor first. The pseudo-classes are based on the standard anchor style.

♦ Make sure they still look like links. It’s important that users know something is intended to be a link. If you take away the underlining and the color that normally indicates a link, your users might be confused. Generally, you can change colors without trouble, but links should be either underlined text or something that clearly looks like a button.

♦ Test visited links. Testing visited links is a little tricky because, after you visit a link, it stays visited. If you have the Web Developer toolbar installed on Firefox, you can choose the Miscellaneous⇒Visited Links command to mark all links as visited or unvisited. In IE, choose Tools⇒Delete Browsing History and then select the Delete History button. You then need to refresh the page for the change to take effect.

♦ Don’t change font size in a hover state. Unlike most styles, hover changes the page in real time. A hover style with a different font size than the ordinary link can cause problems. The page is automatically reformatted to accept the larger (or smaller) font, which can move a large amount of text on the screen rapidly. This can be frustrating and disconcerting for users. It’s safest to change colors or borders on hover but not the font family or font size.

The hover pseudo-class is supposed to be supported on other elements, but browser support is spotty. You can define a hover pseudo-class for div and

elements with some confidence if users are using the latest browsers. Earlier browsers are less likely to support this feature, so don’t rely on it too much.

Selecting in Context

CSS allows some other nifty selection tricks. Take a look at Figure 3-9 and you see a page with two kinds of paragraphs in it.

The code for the context-style.html page is deceptively simple:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Selecting By Context

Figure 3-9: Obviously two kinds of paragraphs are here — or are there?

If you look at the code for context-style.html, you see some interesting things:

♦ The page has two divs. One div is anonymous, and the other is special.

♦ None of the paragraphs has an ID or class. The paragraphs in this page don’t have names or classes defined, yet they clearly have two different types of behavior. The first three paragraphs are aligned to the left, and the last three are aligned to the right.

♦ The style rule affects paragraphs inside the special div. Take another look at the style:

#special p {

This style rule means, “Apply this style to any paragraph appearing inside something called special.” You can also define a rule that could apply to an image inside a list item or emphasized items inside a particular class. When you include a list of style selectors without commas, you’re indicating a nested