Recipe 3.1 Removing Underlines from Links

Table of Contents

Problem

Links in a web document are underlined. You want to remove the underlining, as shown in Figure 3-1.

Figure 3-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;

}

Discussion

Use the :link and :visited pseudo-classes to apply styles to links within a web document. The :link pseudo-class applies to links that the user has not visited. The :visited pseudo-class corresponds to links that the user has visited.

The text-decoration property can take up to five settings, shown in Table 3-1.

Table 3-1. Text-decoration values

Text-decoration values

Result

underline

A line is placed beneath the text.

overline

A line is placed above the text.

blink

The text flashes.

line-through

A line is placed through the middle of the text.

none

No effect is associated with the text.

These text-decoration properties are often used to enhance the presentation of a web page. Instead of having all the links in a document underlined, designers opt to set text-decoration to none in conjunction with changing the link's background color, text color, or both:

a:link, a:visited {

 text-decoration: none;

 background-color: red;

 color: white;

}

In order to complement the design for those site visitors who might have color blindness and therefore might not be able to determine a link color from the default color of regular HTML text, designers also set the weight of the font to bold:

a:link, a:visited {

 font-weight: bold;

 text-decoration: none;

 color: red;

}

The value of line-through might be an interesting element added to a page design used to indicate that a link has already been visited by a user, like an item scratched off a to-do list:

 a:link {

 font-weight: bold;

 text-decoration: none;

 color: red;

}

a:visited {

 font-weight: bold;

 text-decoration: line-through;

 color: black;

}

Recipe 3.1 Removing Underlines from Links