Links | Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)

You already know how to adjust the colors of elements on a page, but links are a bit different. 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. As you can see, there's one more state here than has been traditionally reflected in the <body> tag. 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 on 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 underlining 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 <a> 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 <a> 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.

You can use pretty much any property you like with these selectors, and browsers that support them will dynamically reflow the page to accommodate the change. However, changes that affect the size of the element (such as boldfacing the text dynamically or increasing the font size) can be very jarring to users, so use them cautiously.