HTML and CSS Reference
In-Depth Information
TabLe 14-1:
Ordered List Style Values
aTTribuTe VaLue
descriPTion
eXaMPLe
decimal
(default)
numbers
1, 2, 3
lower-alpha
Lowercase letters
a, b, c
upper-alpha
Uppercase letters
A, B, C
lower-roman
Lowercase Roman
numerals
i, ii, iii
upper-roman
Uppercase Roman
numerals
I, II, III
coMbininG unordered and ordered LisTs
There's no reason to keep
<ul>
and
<ol>
tags isolated from each other. You can easily mix the two
in any desired sequence by nesting one (or more) within the other. This can be a very effective way
of conveying information while at the same time varying your design options.
Say you wanted to expand the computer installation list from the previous example. A solid candi-
date for a bulleted list nested in a numbered list is the level of monitor models: There's no reason for
one to be sequentially before another and an unordered list is just what the doctor ordered.
<ol>
<li>Installation
<ol>
<li>Computer set up</li>
<li>Monitor set up
<ul>
<li>Model XYZ</li>
<li>Model ABC</li>
</ul>
</li>
</ol>
</li>
<li>Maintenance</li>
<li>Use</li>
</ol>
Only the third-level
<ol>
tag was switched to a
<ul>
tag, but the effect is quite noticeable, as shown
in Figure 14-4. If this was your code, you should, of course, remove the CSS declaration that was
previously styled to be a decimal because it is no longer necessary.