logo
CSS Links
A link has four different states — link, visited, active and hover. These four states of a link or hyperlink can be styled differently through CSS properties using the pseudo-classes of anchor element, depending on what state they are in.

a:link — unvisited hyperlinks.

a:visited — visited hyperlinks.

a:hover — hover link when the user place the mouse pointer over it.

a:active — active link  is the process of currently clicking.
Example : a:link
<html>
<head>
<title>CSS Link</title>

<style type="text/css">
   .span_a_1{font-weight:bold;}
   .span_a_1 a{ color:#F60;}
   .span_a_1 a:link {color:#000;}
</style>

</head>
<body>

   <div class="span_a_1"><a href="">Click Here!</a></div>

</body>
</html> 
Output :
Example : a:visited
<html>
<head>
<title>CSS a:visited</title>

<style type="text/css">
   .span_a_2{font-weight:bold;}
   .span_a_2 a{ color:#0099da;}
   .span_a_2 a:visited {color:#000;}
</style>

</head>
<body>

    <div class="span_a_2"> <a href="">Click Here!</a>  </div>

</body>
</html> 
Output :
Example : a:hover
<html>
<head>
<title>CSS a:hover</title>

<style type="text/css">
   .span_a_3{font-weight:bold;}
   .span_a_3 a{ color:#FC0;}
   .span_a_3 a:hover {color:#000; text-decoration:underline;}
</style>

</head>
<body>

    <div class="span_a_3"><a href="">Click Here!</a>  </div>

</body>
</html>
Output :
Example : a:active
<html>
<head>
<title>CSS a:active</title>

<style type="text/css">
    .span_a_4{font-weight:bold;}
    .span_a_4 a{ color:#F60;}
    .span_a_4 a:active {color:#000;}
</style>

</head>
<body>

   <div class="span_a_4"><a href="">Click Here!</a>  </div>

</body>
</html> 
Output :