Choosing Your Markers (Bullets)

When you create a list, be it ordered or unordered, you can also choose what sort of markers (bullets or numbers) should appear to the left of each list item.

In the style sheet rule, type list-style-type: marker, where marker is one of the following values: disc (), circle (), square(), decimal (1, 2, 3, ...), upper-alpha (A, B, C, ...), lower-alpha (a, b, c, ...), upper-roman (I, II, III, IV, ...), or lower-roman (i, ii, iii, iv, ...) (Figure 15.6).

Tips

By default, unordered lists use discs for the first level, circles for the first nested level, and squares for the third and subsequent level lists.
The disc, circle, and square bullets vary slightly in size and appearance from one browser to another.
You can also use the deprecated type attribute in the ul or ol tag and in individual li items to specify a marker style for the entire list or for individual list items, respectively. In unordered lists, the acceptable values are disc (for a solid round bullet), circle (for an empty round bullet), or square. In ordered lists, the acceptable values are A, a, I, i, and 1, which indicate the kind of numeration to be used.
A type attribute in an li tag overrides one in an ol or ul tag.

Choosing Your Markers (Bullets)

Figure 15.5. Here is our simple ordered list, to which we will apply capital Roman numerals (`upper-roman`).

Figure 15.6. You can apply the `list-style-type` property to any list item. If you had two lists on this page, one of which was unordered, you could apply capital Roman letters to just the ordered one by changing the selector in this example to `ol li`.

Figure 15.7. Now the ordered list has capital Roman numerals. Note that most browsers align numeric markers to the right.

Choosing Your Markers (Bullets)

Figure 15.5. Here is our simple ordered list, to which we will apply capital Roman numerals (upper-roman).

Figure 15.6. You can apply the list-style-type property to any list item. If you had two lists on this page, one of which was unordered, you could apply capital Roman letters to just the ordered one by changing the selector in this example to ol li.

Figure 15.7. Now the ordered list has capital Roman numerals. Note that most browsers align numeric markers to the right.

Figure 15.5. Here is our simple ordered list, to which we will apply capital Roman numerals (`upper-roman`).

Figure 15.6. You can apply the `list-style-type` property to any list item. If you had two lists on this page, one of which was unordered, you could apply capital Roman letters to just the ordered one by changing the selector in this example to `ol li`.