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:
| 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.
| Click this link |
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.
| Bring Mouse Here |
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>
|
This will produce following link. This will change it color to pink when user clicks it.
| Click This Link |