Styling Links with CSS

We can style HTML links using exactly the same CSS properties as for styling text (here). But we can actually do a little more to links than we can to plain text.

HTML links have four "states", some of which you may be aware of and some you may not. We can apply different properties to each of these states individually, so that we can have complete control over the link at all times.

HTML link "link" state

The first state is the normal link state, where the link is simply displayed on the page, ready to be clicked.

When using CSS to style your links, the best place to start is with the basic link state. You can specify the link state in your stylesheet by using a:link{ or, because it is the default state, you can simply write a{. Any styling you apply to this basic link state will filter down to your other link states, so you can use this to set things such as font faces and colors if you want them to remain constant for most or all of the link states.

a:link {
	font-size: 0.8em;
	color: blue;
	text-decoration: none;
}

Note the text-decoration: none line used here; this will get rid of the default underline given to all HTML links. However it is a good idea to include some way of letting the user know that our links are links and not just plain text. A popular way of doing this is to have the link underline when the user hovers over it.

HTML link "hover" state

This state occurs when the user hovers their mouse over the link. It is common to have the link change appearance when the user hovers over it, to let them know that it is a clickable link. You may choose to change the font color, or add an underline for example:

a:hover {
	text-decoration: underline;
	color: orange;
}

HTML link "visited" state

The visited state is used when the user has already been to the web page that the link points to. By default web browsers will display this type of link in a different color to the default link state, but we can set whatever properties we like:

a:visited {
	color: silver;
}

HTML link "active" state

The final HTML link state is the active state, which is used when a visitor is currently on the page that the link points to. Again by default this is displayed in different color but we can add any text styling we like:

a:active {
	text-decoration: line-through;
}

Further link styling

It is worth remembering here that we can also apply Box Model styling to our links, as well as to any other HTML element we choose. By using a clever combination of text and Box Model styling we can build up some really impressive effects, such as menus with buttons.