HTML and CSS Reference
In-Depth Information
11.
</li>
12.
<li>Mow the lawn</li>
13.
<li>Make dinner</li>
14.
</ol>
Because nesting lists can be a little tricky—and unwanted styles will appear if it's done
incorrectly—let's quickly review. The
<ul>
and
<ol>
elements may contain only
<li>
elements. The
<li>
element may contain any normal element as desired; however, the
<li>
element has to be a direct child of either a
<ul>
or
<ol>
element.
It's also worth noting that as lists are nested inside of other lists, their list item markers will
change according to how deeply the list is nested. In the previous example, the unordered
list nested within the ordered list uses hollow circles instead of solid discs as the list item
marker. This change happens because the unordered list is nested one level into the ordered
list.
Fortunately we have control over how these list item markers appear at any level, which
we'll take a look at next.
List Item Styling
Unordered and ordered lists use list item markers by default. For unordered lists these are
typically solid dots, while ordered lists typically use numbers. With CSS the style and pos-
ition of these list item markers may be adjusted.
List Style Type Property
The
list-style-type
property is used to set the content of a list item marker (see
Figure 8.8
)
. The available values range from squares and decimal numbers all the way to
Armenian numbering, and the style may be placed on either the
<ul>
,
<ol>
, or
<li>
elements within CSS.
Figure 8.8
An unordered list with a
list-style-type
property value of
square
Any
list-style-type
property value can be added to either unordered or ordered
lists. With this in mind, it is possible to use a numeric list item marker on an unordered list
and a nonnumeric marker on an ordered list.
HTML
Search WWH ::
Custom Search