CSS - Links

First Page
Next Page

CSS Links

Links have a substantial difference when it comes to CSS classes. There are 5 important styling classes that your browser superimposes on just one link. You have to overwrite each of these classes and in a particular order. Don’t stress, we will go through it together.

CSS Link Classes

  • a:link – sets the standard link styling

  • a:active – sets style when link is activated (clicked)

  • a:focus – sets style when the link has focus (often neglected)

  • a:visited – sets the styling for a link that has been previously visited

  • a:hover – when a user hovers over a link, this sets that link’s new style

Example

<style type=”text/css”>
a:link{color:#ff0000;}
a:visited{color:#0000ff;}
a:hover{color:#6a5acd;}
a:active{color:#333;}
a:focus{color:#ffa500;}
</style>
<a href=”http://htmltpoint.com/”>Htmltpoint</a>

Result

Example of Links Without Using link or Visited

Example

<!DOCTYPE html>
   <html>
      <style type="text/css">
         a{font-size:30px; margin-left:15px; text-decoration:none}
        .a1{color:#ff0000;}
        .a1:hover{color:#0000ff;}
        .a1:active{color:#3cb371;}
                    
        .a2:hover{color:#6666FF; text-decoration:underline;}
        .a2:active{color:#3cb371; text-decoration:overline;}
        
        .a3:hover{color:#FFCC00; font-size:40px; text-decoration:line-through;}
        .a3:active{color:#ffa500; background-color:#999999;}
                    
        .a4:hover{ color:#FFCC99; border:1px solid #000000;}
        .a4:active{ color:#6a5acd;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>

Result

First Page
Next Page