Linking the Web - HTML5 with CSS3 - page 198

Listing 6-23. CSS for styling the focus state of an anchor element
a:link {
color: #cc0000;
font-weight: bold;
text-decoration: underline;
}
a:visited {
color: #00cc00;
}
a:hover {
color: #cccc00;
}
a:focus {
outline: 1px dashed #cc0000;
}
The result of the code in Listing 6-23 is shown in Figure 6-7.
Figure 6-7. Browser output of the focus state of an anchor element styled with CSS
Although you may often style hover and focus states similarly, consider applying additional styles for the
focus state that call greater attention to the focused hyperlink. Visitors to your site that use keyboard or
other non-mouse navigation will thank you!
A link's active state, the last of the bunch, occurs in the time during which you've pressed down on a link
using your mouse or keyboard. In this state, links typically appear styled with a bright red color and may
have a one pixel, dotted border. Listing 6-24 shows one example of styling the :active pseudo-class.
Listing 6-24. CSS for styling the active state of an anchor element
a:link {
color: #cc0000;
font-weight: bold;
text-decoration: underline;
}
a:visited {
color: #00cc00;
}