CSS Lists
The CSS list properties allow you to:
- Set different list item markers for ordered lists,
- Set different list item markers for unordered lists, and
- Set an image as the list item marker.
Different List Item Markers
The type of list item marker is specified with the list-style-type
property:
ul.a { list-style-type: circle; }
ul.b { list-style-type: square; }
ol.c { list-style-type: upper-roman; }
ol.d { list-style-type: lower-alpha; }
Values for Unordered Lists
Value |
Description |
|
Value |
Description |
none |
No marker |
disk |
Default. The marker is a filled circle. |
circle |
The marker is a circle. |
square |
The marker is a square. |
Values for Ordered Lists
Value |
Description |
armenian |
The marker is traditional Armenian numbering. |
decimal |
The marker is a number. |
decimal-leading-zero |
The marker is a number padded by initial zeros (01, 02, 03, etc.). |
georgian |
The marker is traditional Georgian numbering (an, ban, gan, etc.). |
lower-alpha |
The marker is lower-alpha (a, b, c, d, e, etc.). |
lower-greek |
The marker is lower-greek (α, β, γ, etc.) |
lower-latin |
The marker is lower-latin (a, b, c, d, e, etc.). |
lower-roman |
The marker is lower-roman (i, ii, iii, iv, v, etc.). |
upper-alpha |
The marker is upper-alpha (A, B, C, D, E, etc.). |
upper-latin |
The marker is upper-latin (A, B, C, D, E, etc.). |
upper-roman |
The marker is upper-roman (I, II, III, IV, V, etc.). |
Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web: