Changing Link Colors with CSS

Bookmark with

StumbleUpon
del.icio.us
Digg it
reddit
Furl
Spurl
ma.gnolia
Yahoo MyWeb
Windows Live

Sponsors

Introduction

This guide shows how to specify link colours with CSS whether you want the same colours for all links or different colours for certain links. Also includes how to change the colour "onmouseover" (hover colour).

Tested in

Specifying the default colour

If you want to specify the default colours which will be used in a web page you should use the following code. These colours will be applied to all links in the document.

<style type="text/css">
<!--
a:link {color: #000000; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }
-->
</style>

This code specifies that all links should be black (#000000), active links should be blue (#0000ff), links which have been visited should be green (#008000) and the hover colour, when you mouseover the link, should be red (#ff0000).

The text decoration has been specified as "underline" which disappears on mouseover. Text-decoration can be "none" "underline" "overline" "line-through" "blink" or "inherit". You can also add many other styles such as borders, font-family etc.

Note: If you specify the "color" you should also specify the "background-color".

Specifying different colours for different links

If you want to have different colours or styles for certain links you need to assign those links a class and write the styles for each class.

Assuming we have two links "Blue Bold Link" and "Red Italic Link" we assign each a suitable class link this:

<a href="blue.htm" class="blue">Blue Bold Link</a>
<a href="red.htm" class="red">Red Italic Links</a>

Our css for these links would be in this form: (note: blue=#0000ff, red=#ff0000)

<style type="text/css">
<!--
a.blue:link {color: #0000ff; background: #ffffff; font-weight: bold;}
a.blue:active {color: #0000ff; background: #ffffff; font-weight: bold;}
a.blue:visited {color: #0000ff; background: #ffffff; font-weight: bold;}
a.blue:hover {color: #0000ff; background: #ffffff; font-weight: bolder;}

a.red:link {color: #ff0000; background: #ffffff; font-style: italic;}
a.red:active {color: #ff0000; background: #ffffff; font-style: italic;}
a.red:visited {color: #ff0000; background: #ffffff; font-style: italic;}
a.red:hover {color: #ff0000; background: #ffffff; font-style: normal;}
-->
</style>

You can have any number of link styles on a page once you assign each one a class and specify the styles for each class. Effective use of "hover" can add a lot to a web page. Experiment!