FREE! Same link text – different colours

Fancy making your links just a little bit more snazzy?

In this free article, Trenton Moss will show you how to use CSS to help add a little bit of spice to your link styles.

 

Back to top

Mouseover this link: ↑ Back to top

Here's the HTML code:

<a href="#" class="top"><span>&uarr;</span><strong> </strong>Back to top</a>

(using &uarr; in HTML produces ↑)

And the CSS:

a:link.top, a:visited.top, a:active.top
{
color: #26a
}
a:hover.top
{
color: #fb0
}

a:link.top span, a:visited.top span, a:active.top span
{
text-decoration: none;
color: #555;
font-weight: bold;
padding:1px;
border: 1px #555 solid
}

a:hover.top span
{
text-decoration: none;
color: #26a;
font-weight: bold;
padding: 1px;
border: 1px #26a solid
}

a.top strong
{
text-decoration: none
}

Navigation

Mouseover these links to see what happens! Here's the HTML code:

<div id="menu">
<ul>
<li><a href="#"><strong>&#187; </strong>Link 1</a></li>
<li><a href="#"><strong>&#187; </strong>Link 2</a></li>
<li><a href="#"><strong>&#187; </strong>Link 3</a></li>
</ul>
</div>

And the CSS:

#menu ul
{
margin: 0;
padding: 0;
list-style: none
}

#menu a:link strong, #menu a:visited strong
{
color: #fff;
text-decoration: none
}

#menu a:hover strong, #menu a:active strong
{
color: #26a;
text-decoration: none
}

This article was written by Trenton Moss. He knows an awful lot about accessible web design.