Chapter 4
Changing the Style of Ordered Lists
By default, items in an ordered list are numbered with Arabic numerals (1, 2, 3, etc.). You can change this
with CSS, once again using the list-style-type property, and this time choosing from another set of
accepted values:
decimal: Arabic numerals (this is the default)
upper-roman: Uppercase Roman numerals (I, II, III, IV, etc.)
lower-roman: Lowercase Roman numerals (i, ii, iii, iv, etc.)
upper-alpha: Uppercase English letters (A, B, C, D, etc.)
lower-alpha: Lowercase English letters (a, b, c, d, etc.)
You can see an example in Listing 4-54, with the rendered results in Figure 4-43.
Listing 4-54. Declaring ordered lists to render with uppercase Roman numerals
ol {
list-style-type: upper-roman;
}
Figure 4-43. The browser generates the Roman numerals automatically
As with unordered lists, the declaration list-style-type: none; will override the display of any list item
markers, while the list remains intact.
Summary
Whew! We’ve covered a lot of ground in this chapter—a majority of the elements in the entire HTML
language, in fact. You learned how to organize your content into bite-sized pieces using meaningful
elements that will communicate the true intent of your words, how to insert some useful special characters,
and just a few ways you can use CSS to affect the presentation of text. You’ve also learned a few things
you should not do when you mark up your content. Be semantically responsible and choose elements for
what they mean, not how they look.
Most of this chapter has been about adding text content to your documents, but not all content is text. In
the next chapter, you’ll learn how to add other media to your web pages—images, audio, video, and
plugins—to communicate ideas that text alone just can’t get across.
