css anchor links

links can be styled with any css properties for example (color font background images).

you can set following properties of a hyper link.

  • a:link      -signifies unvisited hyperlinks.
  • a:visited -signifies visited hyperlinks.
  • a:hover  -a link when the user mouse pointer over it.
  • a:active -signifies an element on which the user is currently clicking.

links order rules:-

  • a:hover must come after a:link and a:visited.
  • a:active must come after a:hover
<style type="text/css">
            
  a:link {color:#000000;  text-transform:capitalize;  font-weight:bold;  }
            
  a:visited {color:#00ff01;  text-transform:capitalize;  font-weight:bold;  }
            
  a:hover {color:#23FF07text-transform:capitalizetext-decoration:underline
            
            
                                                 font-weight:bold;}
                                                 
  a:active {color:#0034FFtext-transform:capitalizetext-decoration:underline font-weight:bold;}
            </style>

links styles - link font color

the css color property is mostly used to set fonts color for links:-

             a:link     {color:#B2FF12;  }
             
             a:visited {color:#FFCC62;  }
             
             a:hover  {color:#FF704D;  }
             
             a:active {color:#FF34DD;  }

anchor link - background-color

the  background-color property is used to set background-color for links:

             a:link     {background-color:#AA0000;  }
             
             a:visited {background-color:#00AA00;  }
             
             a:hover  {background-color:#0000BB;  }
             
             a:active {background-color:#3a5b9c;  }
             

anchor link - text decoration

the  text-decoration property is used to style text for links:

             a:link     {text-decoration:none;  }
             
             a:visited {text-decoration:none;  }
             
             a:hover  {text-decoration:underline; }
             
             a:active {text-decoration:underline;  }