Home Advertise with us Forum Articles Sitemap Contact

CSS Links

Just like fonts, texts & backgrounds, links can also be styled in different ways using CSS styling properties like color, font, etc.

By default, a link appears in blue color with an underline. However, there are times when we wish to change the default style of the link to give it a new look. This is possible using the following four CSS link style selectors:
a:link – Defines the style of the link in its normal or unvisited state

a:visited – Defines the style of a visited link

a:hover – Defines the style of the link when user mouses over it

a:active – Defines the style of the link when user clicks on it
Example :

a:link {color:#0000FF;} /* unvisited link */

a:visited {color:#FF00FF;} /* visited link */

a:hover {color:#00FF00;} /* mouse over link */

a:active {color:#FF0000;} /* selected link */

Besides styling the links with reference to link color, it can also be styled with reference to text decoration & background color. The following examples can help understand this better:

Background Color :
In order to specify the background color for links, the CSS “background color property” is used.

a:link {background-color:#B2FF99;}

a:hover {background-color:#FF704D;}

Text Decoration :
In order to remove underlines from links, the CSS “text decoration property” is used. Other text decoration values include – blink, inherit, overline, underline, line-through or none.


a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

a:active {text-decoration:underline;}