The easiest way to style a link is to use the anchor type selector. For instance, this rule will
make all anchors red:
a {color: red;}
a:link {color: blue;} /* Makes unvisited links blue */
a:visited {color: green;} /* Makes visited links green */
a:hover, a:active { color: red;}
One of the first things most people learn to use these selectors for is turning off the
underline for links, and then turning them back on when they are hovered over or clicked.
This can be done by setting the text-decoration property to none for unvisited and vis-
ited links, and to underline for hovered or active links:
a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline;}
In the previous example the order of the selectors is very important. If the order is
reversed, the hover and active styles won’t work:
a:hover, a:active {text-decoration: underline;}
a:link, a:visited {text-decoration: none;}
From a usability and accessibility standpoint, it is important that your links are distinguish-
able by some means other than color. The reason for this is that many people with visual
impairments find it difficult to distinguish between poorly contrasting colors, especially at
small text sizes. For instance, people with color blindness cannot distinguish between cer-
tain color combinations with similar levels of brightness or saturation. Because of this,
links are underlined by default.
Designers tend to dislike link underlines as they add too much weight and visual clutter to
a page. If you decide to remove link underlines, you could choose to make links bold
instead. That way your page will look less cluttered, but the links will still stand out:
a:link, a:visited {
text-decoration: none;
font-weight: bold;
}
You can then reapply the underlines when the links are hovered over or activated, rein-
forcing their interactive status:
a:hover, a:active {
text-decoration: underline;
}
However, it is possible to create a low-impact underline using borders instead. In the fol-
lowing example, the default underline is removed and replaced with a less obtrusive dot-
ted line. When the link is hovered over or clicked, this line turns solid to provide the user
with visual feedback that something has happened:
a:link, a:visited {
text-decoration: none;
border-bottom: 1px dotted #000;
}
a:hover, a:active {
border-bottom-style: solid;
}
You can create some very interesting effects by using images to create your link underlines.
For instance, I have created a very simple underline graphic comprised of diagonal lines
You can then apply this image to your links using the following code:
a:link, a:visited {
color:#666;
text-decoration: none;
background: url(images/underline1.gif) repeat-x left bottom;
}
a:hover, a:active {
background-image: url(images/underline1-hover.gif);
}
