Altering the Main-Text Links - Page 4

With the left-side icons working the way we'd like, let's give the text links a makeover. Our first order of business is to define a "baseline" for the text links. Typically, designers will change the color of a link in its various states, and sometimes they'll forcibly remove the underlines.

In this case, we're just going to change the colors but leave the underlines alone. That way, the user's preference setting regarding link underlining will hold sway, which will help them recognize links for what they are. Because the blue doesn't really work with our green-and-sand color scheme, though, we're going to make the links a dark green when unvisited and dusky purple when visited. Just to make sure the links stand out, let's boldface them as well.

td#navbuttons a:active img {border-color: #FC3;
  border-style: inset;}
a:link, a:visited {background-color: transparent; font-weight: bold;}
a:link {color: #171;}
a:visited {color: #747;}
</style>

Now we need a good hover style. Actually, we need two good hover styles: one for unvisited links and one for visited links:

a:visited {color: #747;}
a:visited:hover {color: #FFD; background-color: #747;}
a:link:hover {color: #FFD; background-color: #797;}
</style>

---

Splitting Up the Styles

We split the styles between the a:link, a:visited rule and the a:link and a:visited rules to keep them as simple as possible. Otherwise, we would have been duplicating the background-color and font-weight styles for both link states, which doesn't make much sense.

---

Now we get a reverse-text effect on all our links. In CSS2-aware browsers, we'll get yellow-on-green for hovered unvisited links and yellow-on-purple for hovered visited links (see Figure 4.9). It doesn't matter what order these rules come in because they can never conflict with each other. That's because a link can't be both visited and unvisited.

Figure 4.9
When changing the appearance of links, it's best to make sure they still stand out.

---

Dealing with Explorer

If you use the form of "chained" selector shown for your hover styles, make sure you put the default second—that is, whichever hover style you'd prefer to be applied to all links in a document, visited or otherwise. Explorer doesn't understand this syntax, so it will treat all such rules as if they're simple a:hover rules.

Another problem you might encounter in Explorer is that it thinks the last link that was clicked is still active. Therefore, if you click a link and then hit the Back button, the page will come up with the link still in the active state even though it isn't active. Given this fact, you might want to avoid writing a:active styles if Explorer users will make up a big portion of your audience.

---

The Icons - Page 3
Eric Meyer on CSS: Mastering the Language of Web Design
Help! A Press Release! - Page 5