Styling Link

We can create the custom style for the link. Link have four state.
1.Normal
2.Hover
3.Visited
4.Active

All the states of the link can styled using any css property, like (font, color, decoration etc.). Example for all the four state is mentioned below

a:link {color:#FF0000}      /* unvisited link */
a:visited {color:#00FF00}  /* visited link */
a:hover {color:#FF00FF}  /* mouse over link */
a:active {color:#0000FF}  /* selected link */

All the state can have a background effect in the similar manner, for example
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

You can also add to text decoration to the link using the css property, for example.
a:link {text-decoration:none}
a:visited {text-decoration:none}
a:hover {text-decoration:underline}
a:active {text-decoration:underline}

This are some of the ways in which you can change the style for each state of the link.

  • Share/Bookmark