More Web Design Tutorials

Styling Links with CSS

March 12, 2011

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)

Look at this Link Styling….

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;
}

Check This Out!!