It's safe to say that without links there'd be no Web. The ability to be on one page, then click something onscreen and suddenly see a page on a computer half a world away is what makes the Web so useful. Links are also how your visitors navigate their way around your website. That's why web designers agonize over making their links look good and work properly.
In this chapter, you'll learn how to style links to make them stand out from other text. You can also make your links provide visual cues so your site's visitors can see where they are—and where they've been. You'll learn how to use CSS to create onscreen buttons and navigation bars just like the pros use. And in the tutorial section, you'll get some hands-on experience creating a full set of navigation features that work in all browsers.
As always in CSS, you have to select something before you can style it. For links, you need to tell CSS not only what you want to style, but also when you want that style to apply. Web browsers keep track of how a visitor interacts with links, and then displays that link differently depending on the link's status, or state. When you use a CSS link selector, you can target a specific link state as well.
Most browsers recognize four basic link states: an unvisited link, a link that's been visited already (meaning the URL is stored in the browser's history), a link that the visitor's mouse is poised over, and a link that's being clicked. As described in Chapter 3 (Pseudo-Classes and Pseudo-Elements), CSS gives you four pseudo-class selectors to accompany these states—:link, :visited, :hover, and :active. Using them, you can apply different formatting to each state, so there's no doubt in your visitor's mind whether he's been there or done that.
Internet Explorer 8, Firefox, Safari, and Opera also recognize a pseudo-class called :focus. Links get :focus when mouse-averse visitors use the keyboard to tab to them. This pseudo-class is also fun to use with form text fields, as you'll see on Tutorial: Styling a Form.
Suppose you want to change the text color for an unvisited link from boring browser blue to vivid orange. Add this style:
a:link { color: #F60; }Once someone has clicked that link, its state changes to visited, and its color changes to the purple used by most browsers. To change that color to deep red, use this style:
a:visited { color: #900; }When you want to provide a style that applies to all link states—for example, use the same font and font size for all link states—then style the HTML <a> tag by creating a generic a selector. You can then use the specific link state styles—a:visited, for example—to change the color or in some other way customize the look of just that state.
The :hover pseudo-class offers many creative possibilities. (You'll learn quite a few later in this chapter.) It lets you completely alter the look of a link when a visitor moves her mouse over it. If you've used cumbersome JavaScript to make graphic buttons change when a mouse hovers over them, you'll love being able to create the same effect with CSS alone. But to start with a simple example, this style changes the color of a link as a mouse passes over it:
a:hover { color: #F33; }Be careful when adding CSS properties to the :hover pseudo-class. Properties that change the size of the hovered element might affect other elements around it. For example, if you increase the font size of a hovered text link, when you mouse over the link, the text will grow, pushing other elements out of the way. The effect can be jarring.
And finally, for those obsessive-compulsive designers who leave no design stone unturned, you can even change the look of a link for the few milliseconds when a visitor is actually clicking it. Here's how:
a:active {color: #B2F511; }In most cases, you'll include at least :link, :visited:, and :hover styles in your style sheets for maximum design control. But for that to work, you must specify the links in a particular order: link, visited, hover, and active. Use this easy mnemonic to remember it: LoVe/HAte. So here's the proper way to add all four link styles:
a:link { color: #F60; }
a:visited { color: #900; }
a:hover { color: #F33; }
a:active {color: #B2F511; }If you change the order, the hover and active states won't work. For example, if you put a:hover before a:link and a:visited, then the color change won't take effect when hovering.
Why does the order matter? That would be thanks to our friend the cascade (see Chapter 5). All those styles have the same specificity, so the order in which they appear in the code determines the style that wins out. A link can be both unvisited and hovered over. So if the a:link style comes last in the code, then it wins, and the color from a:hover never gets applied.
The styles in the previous section are basic a tag styles. They target certain link states, but they style all links on a page. What if you want to style some links one way and some links another way? A simple solution is to apply a class to particular link tags. Say you have a bunch of links within the body of an article, some of which point to sites that you want to highlight (for example, links to websites belonging to your friends, business associates, or sponsors). You may want to identify these links so people know they're special and are more likely to click them. In this case, you can apply a class to these external links, like this:
<a href="http://www.hydroponicsonline.com" class="sponsor">Visit this great
resource</a>To style this link in its own way, you'd create styles like this:
a.sponsor:link { color: #F60; }
a.sponsor:visited { color: #900; }
a.sponsor:hover { color: #F33; }
a.sponsor:active {color: #B2F511; }Leaving off the a and only specifying the class works too:
.sponsor:link { color: #F60; }
.sponsor:visited { color: #900; }
.sponsor:hover { color: #F33; }
.sponsor:active {color: #B2F511; }Now only those links with a class of "sponsor" will get this formatting.
These examples change only the links' color, but that's just to make it simple for demonstration purposes. You can use any CSS property to format links. As you'll see in the next section, you have lots of creative ways to style links.
If a bunch of links appear together in one area of a page, you can also save time by using descendent selectors. Say you have five links that lead to the main sections of your site. They represent your main navigation bar, and so you want to give them a distinctive look. Just wrap those links in a <div> tag and apply a class or ID to it like this: <div id="mainNav">. Now you have an easy way to identify and format just those links:
#mainNav a:link { color: #F60; }
#mainNav a:visited { color: #900; }
#mainNav a:hover { color: #F33; }
#mainNav a:active {color: #B2F511; }Using descendent selectors, it's easy to style links differently for different areas of a web page. (See Using Descendent Selectors in Chapter 15 for a thorough discussion of the power of descendent selectors.)
It's very common to use bulleted lists to present links (you'll see an example of this technique on Using Unordered Lists). In this case, you can add an ID or class to the <ul> tag for the list—<ul id="mainNav">, for example—then create descendent selectors like #mainNav a:link to style them.