Section 9.1. Selecting Which Links to Style

9.1. Selecting Which Links to Style

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 when . 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.

9.1.1. Understanding Link States

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 (Section 3.1), 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.

---

Note: Firefox and Safari 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 in Section 10.5.

---

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's clicked that link, its state changes to visited , and its color to the purple used by most browsers. To change that color to deep red, use this style:

 a:visited { color: #900; } 

---

Tip: When you want to style both unvisited and visited links the same, use the group selector a:link, a: visited . You can also use the generic a style, but if you have any named anchors that link to other parts of the same Web page (such as <a name ="resources">Other Resources</a> ), the a selector styles them, too.

---

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 (Section 9.1.1). 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; } 

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 in order 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 .

---

Note: 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. Since a link can be both unvisited and hovered over , if the a:link style comes last in the code, then it wins and the color from a:hover never gets applied.

---

9.1.2. Targeting Particular Links

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 other stories on your Web site and others that point outside to other sites. You may want to identify external links in some way so visitors can tell they're about to leave your site. In this case, you can apply a class to these external links, like this:

 <a href="   http://www.hydroponicsonline.com   " class="external">Visit this great resource</a> 

To style this link in its own way, you'd create styles like this:

 a.external:link { color: #F60; } a.external:visited { color: #900; } a.external:hover { color: #F33; } a.external:active {color: #B2F511; } 

Leaving off the a , and only specifying the class, works too:

 .external:link { color: #F60; } .external:visited { color: #900; } .external:hover { color: #F33; } .external:active {color: #B2F511; } 

Now only those links with a class of 'external' will get this formatting.

---

Note: 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 on the next page, you have lots of creative ways to style links.

---

9.1.2.1. Grouping links with descendent selectors

If a bunch of links appear together in one area of a page, you can also save time by using descendent selectors . As discussed in Section 3.1, a descendent selector lets you target a tag that appears within another tag. 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 Section 14.4.1 in Chapter 14 for a thorough discussion of the power of descendent selectors.)