Editing link styles using CSS

Along with changing link colors, CSS enables you to style links just like any other piece of
text. You can define specific fonts; edit padding, margins, and borders; change the fontweight and style; and also amend the standard link underline, removing it entirely if you
wish (by setting the text-decoration property to none).
a:link {
color: #3366cc;
font-weight: bold;
text-decoration: none;
}
Removing the standard underline is somewhat controversial, even in these enlightened
times, and causes endless (and rather tedious) arguments among web designers. My view
is that it can be OK to do so, but with some caveats.
If you remove the standard underline, ensure your links stand out from the surrounding
copy in some other way. Having your links in the same style and color as other words and
not underlined is a very bad idea. The only exception is if you don’t want users to easily
find the links and click them (perhaps for a children’s game or educational site).
A common device used by web designers is to recolor links, in order to distinguish them
from body copy. However, this may not be enough (depending on the chosen colors),
because a significant proportion of the population has some form of color blindness. A
commonly quoted figure for color blindness in Western countries is 8%, with the largest
affected group being white males (the worldwide figure is lower, at approximately 4%).
Therefore, a change of color (to something fairly obvious) and a change of font weight to
bold often does the trick.
Whatever your choice, be consistent—don’t have links change style on different pages of
the site. Also, it’s useful to reinforce the fact that links are links by bringing back the
underline on the hover state. An example of this is shown to the right (see editing-linkstyles-
using-css.html and editing-link-styles-using-css.html in the chapter 5
folder of the completed files).

Links are bold and orange, making them stand out from surrounding text. On the hover
state, the link darkens to red and the standard underline returns. The second of those
things is achieved by setting text-decoration to underline in the a:hover declaration.
Note that even when presented in grayscale, such as in this book, these two states can be
distinguished from surrounding text.

You can also combine pseudo-classes. For example, if you add the rules shown following
to a style sheet (these are from the editing-link-styles-using-css documents), you’d
have links going gray when visited, but turning red on the hover state (along with showing
the underline). Note that because the link and visited states are exclusive, the bold
value for font-weight is assigned using the grouped selector. It could also be applied to
individual rules, but this is neater.
a:link, a:visited {
font-weight: bold;
}
a:link {
color: #f26522;
text-decoration: none;
}
a:visited {
color: #8a8a8a;
}
a:hover {
color: #f22222;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: underline;
}
If you decided that you wanted visited links to retain their visited color on the hover
state, you could add the following rule:
a:visited:hover {
color: #8a8a8a;
}