Ever wonder how they do all those cool tricks with the hyperlinks embedded into pages? Are you tired of the typical default color scheme and style of your hyperlinks? Here’s some ideas and CSS tips to add more impact into your design!

First, it’s important to know that CSS and browsers are a bit finicky when it comes to how you style your hyperlinks. They must be listed in your CSS document (or, if internal to your page) in this order:

	
a:link
	
a:visited
	
a:hover
	
a:active

If you can just remember LVHA then you won’t run into problems when stying your links.

The standard default hyperlinks are blue, underlined with a solid line, change to purple after being clicked on and have no rollover effects. We’ll show you how to  make them a bit more exciting. First, let’s play with the colors and underlining:

a:link {
text-decoration: 1px #CCC dotted;
font-size: 10px;
}

a:visited {
text-decoration: 1px #FF0000 solid;
font-size: 10px;
}

a:hover {
text-decoration: 1px #FF0000 dotted;
font-size: 10pt;
color: #FF0000;
}

a: active {
text-decoration: 1px #FF0000 solid;
font-size: 10pt;
color: #FF0000;
}

This produces a nice simple rollover effect when moused over where the dotted underline turns to solid underline and changes color. You can also add a background change to your links, like so:

a:link {
text-decoration: none;
font-size: 10px;
bottom-border: 1px #CCC dotted;
}

a:visited {
text-decoration: none;
font-size: 10px;
bottom-border: 1px #CCC dotted;
}

a:hover {
text-decoration: none;
font-size: 10pt;
color: #FFF;
background-color: #FF0000;
}

a: active {
text-decoration: none;
font-size: 10pt;
bottom-border: 1px #CCC dotted;
color: #FF0000;
}

This produces a background color change and i’ve formatted the font color to turn white so it shows properly for the effect. Notice I also changed the text-decoration to ‘none’ and inserted the border-bottom selector which produces a nicer look than the text-decoration.

You can also use images in your links. Like so:

a {
    padding-left: 16px;
    background-image: url(icon.gif) no-repeat;
}

Which would place the icon image to the left side of your text for every link on your site. If you wanted this to be for specific links you’d create a class for it like this:

a.imagelink {
    padding-left: 16px;
    background-image: url(icon.gif) no-repeat;
}

And assign it to the links you want to display the image like so:

Link

Or like this, for a class used in showing PDF hyperlinks:

a.pdf {
    color: #c00;
    font-weight: bold;
    text-decoration: none;
    padding-left: 10px;
    background-image: url(pdf_icon.gif) no-repeat;
}
a.pdf:hover {
    text-decoration: underline;
}

And, here’s one of my favorite methods of formatting links for specific types of documents of extensions. This example shows a link style for all .pdf extensions and uses an icon image displayed at the end of each link.

a[href $='.pdf'] {
padding-left: 22px;
background: transparent url('images/pdf_icon.gif') no-repeat center left;
display:inline-block;
}

Hopefully this will help get you away from the typical boring default hyperlinks.