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 ...
Get CSS: The Missing Manual now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.