CSS - Links

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="/html/index.htm">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="/html/index.htm">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="/html/index.htm">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="/html/index.htm">Click This Link</a>