Recipe 6.1. 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; }

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; they are listed in Table 6-1.

Table 6-1. Text-decoration settings
Text-decoration valuesResult
                                                              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 set text-decoration to none along 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 may be color-blind and therefore may 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 may be an interesting element to add to a page design and use to indicate that a link has already been visited by a user, like an item scratched off a to-do list (see Figure 6-2):

 a:link {  font-weight: bold;  text-decoration: none;  color: red; } a:visited {  font-weight: bold;  text-decoration: line-through;    color: black; }

Figure 6-2. Visited link is crossed out


See Also

The CSS 2.1 specification for the text-decoration property at http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration, Jakob Neilson's updated "Design Guidelines for Visualizing Links" at http://www.useit.com/alertbox/20040510.html.




CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net