CSS: Anchor styles [The right way to do it]

Below is a small CSS tip of how to define and override anchor styles correctly. This example demonstrates the use of the pseudo-classes. Most common anchor pseudo-classes are:

 

• link
• visited
• hover
• active

 

Define and override anchor styles:

 

  
    a:link              { color:red; text-decoration:underline; }
    a:visited           { color:red; text-decoration:underline; }
    a:hover             { color:green; text-decoration:underline; }
    a:active            { color:red; text-decoration:underline; }

    a.otherLink:link    { color:red; text-decoration:none; }
    a.otherLink:visited { color:red; text-decoration:none; }
    a.otherLink:hover   { color:green; text-decoration:underline; }
    a.otherLink:active  { color:red; text-decoration:none; }