a:link {
color: #f26522;
}
a:visited {
color: #8a8a8a;
}
a:hover {
color: #f22222;
}
a:active {
color: #000000;
}
Note that the code block could be simplified, such as by dispensing with the navigation
div and instead applying the relevant id value directly to the unordered list.
However, this exercise aims to show how to create links in context, using a simplified
web page layout that has specific areas for certain content types. See Chapters 7 and
10 for more on layout.
USING LINKS AND CREATING NAVIGATION
161
5
4. Next, style the navigation links. Contextual selectors are used to style the links
within the navigation div.
#navigation a, #navigation a:visited {
text-decoration: none;
font-weight: bold;
color: #666666;
text-transform: uppercase;
}
#navigation a:hover {
text-decoration: underline;
}
The first rule removes the underline from all links within the navigation div, renders
them in bold and uppercase, and colors them a medium gray. The second rule
brings back the underline on the hover state.
5. Style the footer links. Add another contextual selector to style the footer links,
making them smaller than links elsewhere on the page:
#footer a:link, #footer a:visited {
font-size: 0.8em;
}
And there we have it: three different link styles on the same page, without messing around
with classes.
Enhanced link accessibility and usability
We??™ve already touched on accessibility and usability concerns during this chapter, so we??™ll
now briefly run through a few attributes that can be used with anchors (and some with
area elements??”see the ???Image Maps??? section later in the chapter) to enhance your web
page links.
Pages:
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249