|
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.
<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>
|
Shown below is an example of the links cusomised with the above CSS code
|
link 1
Link 2
|
It is often useful to experiment what each effect can do with a page. The hover effect adds some good mouseover effects
|
