ptg16476052Links 1738
As you can see, these selectors provide access to an additional state that the old attributes
did not: the hover state. Here’s an example that specifies the colors for links in each of
their states:
Pseudo-classes are most commonly used with links, but there are a number of other
pseudo-classes that can also be used that I’ll talk about later in this lesson.
Links
You already know how to adjust the colors of elements on a page, but links are a bit dif-
ferent. They’re more complicated than other types of elements because they can exist in
multiple states: an unvisited link, a visited link, an active link, and a link that the user
currently has the pointer over. Using CSS, you can change the color of a link when the
user mouses over it (referred to as the hover state) as opposed to when he’s currently
clicking it (the active state).
Another advantage of CSS is that you can change the color schemes for links on the same
page rather than being forced to use one scheme throughout. Finally, you can turn off
link underlining if you want. For example, here’s a style sheet that turns off link under-
lining for navigation links, renders them in boldface, and keeps the same color for visited
and unvisited links:
a:link { color: blue; }
a:active { color: red; }
a:visited { color: purple; }
a:hover { color: red; }
a.nav { font-weight: bold;
text-decoration: none; }
a.nav:hover, a.nav: active { background-color: yellow;
color: red; }
a.nav:link, a.nav:visited { color: green; }
From the style sheet, you can see that for all tags in the class nav, the text-decoration
property is set to none, which turns off underlining, and font-weight is set to bold. For
tags on the rest of the page, the underlining remains on, but I’ve set it up so that when
the mouse is over the links, they turn red. For navigation links, when the mouse is over the
links, the background of the element turns yellow and the text turns red.