NAVIGATION STRATEGIES - HTML5 - page 157

Each has the same formatting as other elements, but they're declared with the element name
separated by a colon. For example, the following code snippet shows how the hover pseudo-
class is styled:

a : hover
{
color : #A69055;
}

When that code is added to a style sheet, whenever the mouse hovers over the link ( <a> tag),
it will change the color to the hover dei nition. Of course the colors dei ned for the <a> tag
have to be dif erent from the hover , but you can add subtle or blatant signals to the user that
the text is a link. Likewise, you can change other features using the pseudo-classes. h e
following examples will give you an idea:

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
a {
font - family : Verdana , Geneva , sans - serif ;
font - size : 11px ;
}
a : link {
color : #cc0000;
text - decoration : none ;
}
a : hover {
font - size : 14px ;
}
a : visited {
color : #00cc00;
text - decoration : none ;
}
a : active {
background - color : #ffff00;
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Pseudo Classes in Links </ title >
</ head >
< body >
< a href = ”#” > Click here </ a >
</ body >
</ html >

161

When using pseudo-classes for navigation, you want to keep the user in mind. Adding strange
ef ects with pseudo-classes can be fun, but you need to ask whether the ef ects will assist or
confuse users. If you can add an ef ect that users associate with making choices, then that