Putting It All Together - Web Standards: Mastering HTML5, CSS3, and XML - page 413

If the project is more than just a small web page, these styles should not be applied globally, simply because
these specific styles would be applied to all lists throughout the document, most of which should be overridden (there
would be more styling rules to override than the inherited rules that suit our needs). Instead, an identifier should be
added to the list such as shown in Listing 12-8.
Listing 12-8. An Unordered List Used for Navigation Is Identified to Be Styled Differently
<ul id="navtabs">
<li id="first">
<a href="http://www.example.com/" title="Home" accesskey="h" tabindex="1">Home</a>
</li>
...
<li id="last">
<a href="contact/" title="Address and phone" accesskey="c" tabindex="7">Contact</a>
</li>
</ul>
From now on, all styles should begin with #navtabs (Listing 12-9).
Listing 12-9. A Specific Ruleset for Styling the First List Items of the Unordered List navtabs
#navtabs li.first {
background: none;
padding-left: 0;
}
Alternatively, the styles can be declared at the container level and use inheritance to style the list. 4 This approach
is useful when multiple lists are used within the document that have the same styles or are slightly different only. Such
differences can be easily overridden by more specific styling rules.
Additional styles can be declared for access keys and further features. For example, the markup in Listing 12-10
can be styled with the CSS rules shown in Listing 12-11.
Listing 12-10. A Span Used to Style an Access Key
S <span class="ak"> i </span> temap
Listing 12-11. CSS Rules for Access Keys
span.ak {
color: red;
background-color: #ffb;
border-bottom: solid #000080 1px;
}
The default bullets can be changed to arbitrary characters or images by CSS. Listing 12-12 shows an example,
which applies to unordered lists such as the one presented in Listing 12-13.
4 Note that in this case the identifiers should be changed from id to class in the markup and from hash mark ( # ) to period ( . )
in the CSS.