CSS: The Missing Manual

Styling Lists

The <ul> and <ol> tags create bulleted and numbered lists, like lists of related items or numbered steps. But you don't always want to settle for the way Web browsers automatically format those lists. You may want to swap in a more attractive bullet, use letters instead of numbers, or even completely eliminate the bullets or numbers.

Types of Lists

Most Web browsers display unordered lists (<ul> tags) using round bullets, and numbered lists (<ol> tags) using…well…numbers. With CSS, you can choose from among three types of bullets— disc (a solid round bullet), circle (a hollow round bullet), or square (a solid square). There are also six different numbering schemes—decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman, or lower-roman (see Figure 6-8). You select all these options using the list-style-type property, like so:

Figure 6-7. The :first-letter pseudo element formats the first letter of the styled element, like the "initial caps" to the left. The :first-line selector, on the other hand, styles the first line of a paragraph. Even if your guest resizes the window (bottom), the browser still styles every word that appears on a paragraph's first line.

 
list-style-type: square;

or

 
list-style-type: upper-alpha;

Figure 6-8. Many Web browsers display the ...