)
The following example, used in editing-link-styles-using-css.css, turns the background
of focused links yellow in compliant browsers:
a:focus {
background: yellow;
}
USING LINKS AND CREATING NAVIGATION
159
5
Multiple link states: The cascade
A common problem web designers come up against is multiple link styles within a document.
While you should be consistent when it comes to styling site links, there are specific
exceptions, one of which is site navigation. Web users are quite happy with navigation bar
links differing from standard inline links. Elsewhere, links may differ slightly in web page
footers, where links are often displayed in a smaller font than that used for other web
page copy; also, if a background color makes the standard link color hard to distinguish, it
might be useful to change it (although in such situations it would perhaps be best to
amend either the background or your default link colors).
A widespread error is applying a class to every link for which you want a style other than
the default??”you end up with loads of inline junk that can??™t be easily amended at a later
date. Instead, with the careful use of divs (with unique ids) on the web page and contextual
selectors in CSS, you can rapidly style links for each section of a web page.
Required files XHTML-basic.html and CSS-default.css from the basicboilerplates
folder as a starting point.
What you??™ll learn How to use the cascade to set styles for links housed in specific
areas of a web page.
Pages:
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247