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; }

Related Posts:

• Javascript: Maintaining Page Scroll Position

Thank you so much for this, it helped a lot!

It looks like there are various reasons (see http://dbaron.org/css/1999/09/links for the gory details) for styling links like this:

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

Using ":link" instead of "a:link" matches other links that are possible with xml, while there's no benefit to prefering "a:link".

-Mike

CSS: Anchor styles [The right way to do it] | CSS Tutorials - CSSHelper.net

Adding Style to Plugins | Advanced Wordpress Tutorials