This tutorial will teach you how to set different properties of a hyper link using CSS. You can set following properties of a hyper link:

We will revisit same properties when we will discuss Pseudo-Classes of CSS.

• The :link Signifies unvisited hyperlinks.

• The :visited Signifies visited hyperlinks.

• The :hover Signifies an element that currently has the user's mouse pointer hovering over it.

• The :active Signifies an element on which the user is currently clicking.

Usually these all properties are kept in the header part of HTML document.

Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows.

<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>

Now we will see how to use these properties to give different effects to hyperlinks.

Set the color of Links:

Following is the example which demonstrates how to set the link color. Possible value could be any color name in any valid format.

<style type="text/css">
a:link {color:#000000}
</style>
<a href="index.html">Black Link</a>

This will produce following black link:

Set the color of Visited Links:

Following is the example which demonstrates how to set the color of visited links. Possible value could be any color name in any valid format.

<style type="text/css">
a:visited {color: #006600}
</style>
<a href="index.html">Click this link</a>

This will produce following link. Once you will click this link, it will change its color to green.

Change the color of links when mouse is over:

Following is the example which demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible value could be any color name in any valid format.

<style type="text/css">
a:hover {color: #FFCC00}
</style>
<a href="index.html">Bring Mouse Here</a>

This will produce following link. Now you bring your mouse over this link and you will see that it changes its color to yellow.

Change the color of active links:

Following is the example which demonstrates how to change the color of active links. Possible value could be any color name in any valid format.

<style type="text/css">
a:active {color: #FF00CC}
</style>
<a href="index.html">Click This Link</a>

This will produce following link. This will change it color to pink when user clicks it.