CSS Cookbook, 2nd Edition

Chapter 6. Links and Navigation

Introduction

Without links, the point of the Web would be lost.

Links let you to follow a trail of information from one web page to another, from one idea to another, regardless of where in the world the site’s server is located.

In 1996, web usability expert Jakob Nielsen listed the use of nonstandard link colors as one of the top ten mistakes in web design (see http://www.useit.com/alertbox/9605.html). However, his advice to use blue for the link color for pages that the user hasn’t visited and to use purple or red links to represent previously visited pages, came from consistency concerns, not aesthetics.

With CSS, the Web isn’t an either-or proposition. Links being an essential part of the World Wide Web can be both consistent and visually pleasing.

This chapter shows you how to improve aesthetics by changing the link styles. You’ll learn everything from how to remove the underline from links to how to change cursors, create rollovers without the need for JavaScript, create a horizontal tab menu, and much more.

Removing Underlines from Links (and Adding Other Decorations)

Problem

Links in a web document are underlined. You want to remove the underlining (see Figure 6-1).

Figure 6-1. Links without underlines

Solution

Use the text-decoration property with the pseudo-class selector for unvisited and visited links:

a:link, a:visited { text-decoration: none; ...