Selectors in action - step by step tutorial

Step 4 - styling the <a> element

To style the <a> elements we use Pseudo-class selectors. They must appear in the correct order. For this example, we will use a color for the general link and reverse it for the hover state. This will give users strong feedback when they roll over a link. If you want to use the same declarations for two states, they can be combined - as long as you combine "link" and "visited" or "hover" and "active".

a:link
{
color: #036;
}

a:visited
{
color: #066;
}

a:hover ,a:active
{
color: #fff;
background-color: #036;
}

View step 4 »

Go to Step 5 »

Other Max Design articles and presentations
Associated with webstandardsgroup.org