HTML and CSS Reference
In-Depth Information
eXPandinG an ouTLine
Remember how nesting unordered lists gave you a different bullet image on each sub-level? When
you nest ordered lists, the graphic does not change; instead, the numbering restarts. By default, stan-
dard cardinal numbers (1, 2, 3, etc.) are used on each level, but it is entirely possible — through CSS
styling — to achieve the look-and-feel of a more traditional outline.
Start by creating a nested ordered list that details how to set up, use, and maintain a fictional com-
puter system:
<ol>
<li>Installation
<ol>
<li>Computer set up</li>
<li>Monitor set up
<ol>
<li>Model XYZ</li>
<li>Model ABC</li>
</ol>
</li>
</ol>
</li>
<li>Maintenance</li>
<li>Use</li>
</ol>
Rendered as-is in a browser shows each sub-level with the
standard number set as shown in Figure 14-2.
If you wanted to differentiate each level with a differ-
ent format, all you need are a few styles. The following
CSS rules define the ordered list to use uppercase Roman
numerals for the outermost level, uppercase letters for the
first sub-level, and then standard numbers for the second
sub-level:
ol { list-style: upper-roman;}
ol ol { list-style: upper-alpha;}
ol ol ol {list-style: decimal;}
FiGure 14-2
As you can see in Figure 14-3, there's a completely different
feel to the more structured outline.
Table 14-1 contains a chart of the acceptable values for the
list-style attribute as pertains to ordered lists.
FiGure 14-3
Search WWH ::




Custom Search