More Than One Link Style (CSS)

Written by Tamsin Stone published 9th Mar 2006 | Comment on this article

Using CSS (Cascading Style Sheets) you can have more than one style of link on web page. This is handy if you want, for example, the links on a menu to look one way and the links in the text to look another.

CSS: More Than One Link Style

You can set the default links on a page by adding the following to the
<head> tag of your page:

<style type="text/css">
a:link       {color: red;}
a:visited    {color: red;}
a:hover      {color: green;}
a:active     {color: red;}
</style>

Note: The different link states must be defined in the above order to work.

Next you can define alternative styles for other links, for example those in a menu. Add these to the others between the <style> tags.

.themenu a:link       {color: orange;}
.themenu a:visited    {color: blue;}
.themenu a:hover      {color: orange;}
.themenu a:active     {color: orange;}

.themenu is the class name we are going to give the links to tell them to use that style not the default one.

The html code for the link looks like this:

<span class="themenu"><a href="#">Example Link</a></span>

All the links between the span tags will have the same style.

To add another style of link add the CSS again with a different class name.