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 :

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.