List style type
Change bullet styles with list-style-type.
Change the marker
In HTML, the ul and ol tags create lists. By default, ul shows a filled disc and ol shows arabic numerals (decimal). The CSS list-style-type property changes these markers.
For example, writing square for ul gives square markers, and lower-roman for ol gives roman numerals. The list's shape then fits its content.
Common values
Common values for bulleted lists: disc (filled circle), circle (hollow circle), square (square). For numbered lists: decimal (1, 2, 3), lower-alpha (a, b, c), lower-roman (i, ii, iii), upper-roman (I, II, III).
Once you pick a value, the browser puts that marker in front of every item. The marker style is uniform inside one list; mixing shapes needs separate classes per item.
Exercise Turn a numbered list into roman numerals
Write an ol type selector and assign list-style-type: lower-roman. The numbered list will then show lowercase roman numerals.
Show example solution
/* change the numbered list marker */
ol {
list-style-type: lower-roman;
}Test yourself
-
What does list-style-type: lower-roman produce?
ol { list-style-type: lower-roman; }- i, ii, iii, iv
- 1, 2, 3, 4
- a, b, c, d
- •, •, •, •
Show answer
i, ii, iii, iv — Correct. lower-roman gives lowercase roman numerals: i, ii, iii.
-
Set a square marker
ul { ____; }Show answer
ul { list-style-type: square; } -
Match each value to its meaning
- disc
- Filled circle
- circle
- Hollow circle
- square
- Square marker
- decimal
- 1, 2, 3, 4