Home     SSI Lab     CSS Templates     CSS     Htaccess     Web Design     XHTML

CSS Tutorials




CSS Templates



IE Related



Web Design




Changing Link Colors with CSS


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 Mozilla Icon Opera Icon IE6 Icon

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

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

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!

Advertisement Sign up for free to PayBox.me today and get $25 just for joining AND earn up to $20 per day for participating.