Tutorials > CSS > Custom Link Colors
Replace boring link colors with ones that match the color scheme of your site.
Standard link colors are boring and frequently do not match the color scheme of your website. Pseduo-classes, which add different effects to some selectors, can change the link colors to match your site.
Syntax Code:
------------------------------------------------------------------------
<style type="text/css">
selector.class:pseudo-class
{
property: value
}
</style>
------------------------------------------------------------------------
Code:
------------------------------------------------------------------------
<style type="text/css">
a:link {
color: #990033;
text-decoration: none;
}
a:visited {
color: #990033;
text-decoration: none;
}
a:hover {
color: #354250;
text-decoration: underline;
}
a:active {
color: #354250;
text-decoration: none;
}
</style>
------------------------------------------------------------------------
As you see above, there are four link states: link, visited, hover, and active. The link state is for all links which the mouse is not over and has not been clicked on before. The visited state is for all links that have been clicked on before. The hover state is for all links in which the mouse is moving over. And finally, the active state is for all links that have just been clicked on or actived.
For each link state, choose a color and text-decoration. The possible values for text-decoration are none, underline, overline, line-through, and blink. Try experimenting with each value. All of the text-decoration values should be self explainatory to understand how they will change your link styles.
That's it! For custom links you do not need to apply link styles to each and every link on your page; they are applied automatically. :)
