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).
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.
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>
Our css for these links would be in this form: (note: blue=#0000ff, red=#ff0000)
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!