CSS Links


Links can be styled differently depending on what state they are in.

The four links states are:

link style syntax

 a:link { 
	color:#333333;
	}
    a:visited { 
	color:#FFFFFF;
	}
    a:hover { 
	color:#CCCCCC;
	background-color:#333333;
	text-decoration:none;
	}
    a:active { 
	color:#333333;
	}
  • a:link:
    Describes any hyperlink that has not been visited by the user's browser. In other words, the page linked to is not present in the browser's local memory (a normal, unvisited link).
  • a:visited:
    Describes any hyperlink that has been visited and is present in the browser's local memory (a link the user has visited).
  • a:hover:
    Describes a hyperlink while the user's mouse happens to be hovering over it (a link when the user mouses over it).
  • a:active:
    Describes a hyperlink that has been clicked but not yet released (a link the moment it is clicked).

Example of Link

<!DOCTYPE html>
   <html>
      <style type="text/css">
            a:link { 
            color:#333333;
            }
            a:visited { 
            color:#FFFFFF;
            }
            a:hover { 
            color:#CCCCCC;
            background-color:#333333;
            text-decoration:none;
            }
            a:active { 
            color:#333333;
            }
       </style>
    <body>
    <a href="www.fastlearning.in"> Welcome to Fastlearning.in </a>
     </body>
  </html>
Output
 Welcome to Fastlearning.in

Example of Links ( Without Using link or Visited )

<!DOCTYPE html>
   <html>
      <style type="text/css">
         a{font-size:20px; margin-left:10px; text-decoration:none}
        .a1{color:#333333;}
        .a1:hover{color:#FF3300;}
        .a1:active{color:#669966;}
                    
        .a2:hover{color:#6666FF; text-decoration:underline;}
        .a2:active{color:#669966; text-decoration:overline;}
        
        .a3:hover{color:#FFCC00; font-size:40px; text-decoration:line-through;}
        .a3:active{color:#00CC33; background-color:#999999;}
                    
        .a4:hover{ color:#FFCC99; border:1px solid #000000;}
        .a4:active{ color:#CC6699;border:none}
       </style>
    <body>
        <a href="#" class="a1">Check Me</a>
        <a href="#" class="a2">Check Me</a>
        <a href="#" class="a3">Check Me</a>
        <a href="#" class="a4">Check Me</a>
     </body>
  </html>
Output
        Check Me
        Check Me
        Check Me
        Check Me

Share this article on