Depiction- Webmaster Resources
Stock Image


Contributors: Advertise Here  |  Advertise Here  |  Advertise Here


Misc Links: Submit Tutorials (Earn $$) l Advertising l Privacy Policy | Site Map

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

Now add the following in the head section of you page.(between <head> and </head>) (This is the same style I use.)

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

Explanation

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. :)


 
 

Affiliates

Tutorial Stream Photoshop Tutorials
Tutorial Man Wallpaper Stock  More

Resources