CSS: The Missing Manual, 4th Edition

Chapter 9. Sprucing Up Your Site’s Navigation

It’s safe to say that without links there’d be no Web. The ability to be on one page, and 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.

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

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