List Style Type
list-style-type property determines what style of bullet or numeric indicator is applied to each list item. This property will work if applied to the list as a whole (
ol), or if it is applied directly to the list items (
li). Some common possible values are:
disc: The default value. A filled circle.
none: No marker is shown.
circle: A hollow circle.
square: A filled square.
decimal: Decimal numbers, counting up from 1.
decimal-leading-zero: Decimal numbers with a leading zero, counting up from 01.
upper-roman: Uppercase roman numerals, counting up from I.
lower-roman: Lowercase roman numerals, counting up from i.
upper-latin: Uppercase alphabetical letters, counting up from A.
lower-latin: Lowercase alphabetical letters, counting up from a.
By default, a list nested inside another list receives different bullets/numbers from the parent list. This is great for creating visual distinction between the different levels of hierarchy. To create custom nested list styles, you can use a decendant selector.
ul ul selects for any list inside another list. And
ul ul ul selects for any list nested at least two deep. And so on.
In the example above, try out different values for
list-style-type for the different lists. Can you figure out how to make only the nested
ol show decimal numbers?
By default, lists have a certain amount of
padding-left, which is responsible for the indentation of the text. And, by default, the bullet sits inside of the padded area. If you wish to remove or adjust the indentation, you can simply apply a custom value, e.g.
List Style Position
By default, the bullets / numeric indicator associated with list items are placed outside the layout, to the left of the alignment of the text. However, this can be changed using the
list-style-position property. The default value is
outside. By changing the value to
inside, the bullets / indicators are treated like a part of the text. This is perhaps best understood by example: