Styling Links with CSS

Most browsers will show links by default in blue and visited links in purple. BOOOORING!!! That, and purple just doesn’t look good on some people. (See a boring link without style) But with a little bit of CSS, you can style your links any way you like.

There are several states a link can be in:

• link – default (so your standard, never-clicked link)
• visited link
• focus – when tabbing with the keyboard
• hover – when the curser moves over the link
• active – the moment the link is clicked

When you are using CSS to style your links, this exact order has to be maintained, or your styles may not work properly. I am not saying you have to use all the properties, but those that you use must be styled in this very order.

There are a couple ways to help remember this order. The more common one, which does not include ‘focus’, is LoVe – HAte and then there is Lord Vader’s Former Handle Anakin. I’m sure you get the point.

It’s very easy to add some color to our link and its states:

a:link {color: #006600;} (green)
a:visited {color: #FF0000;} (red)
a:focus {color: #9933CC;} (purple)
a:hover {color: #000099;} (blue)
a:active {color: #FF9933;} (orange)

Or we can play with background colors and get a bit fancier.

a:link {
	color: #006600;
	background: #CCFF99;
}
a:visited {
	color: #FF0000;
	background: #ff6633;
}
a:focus {
	color: #9933CC;
	background: #ffccff;
}
a:hover {
	color: #000099;
	background: #ccffcc;
}
a:active {
	color: #FF9933;
	background: #ffff00;
}