Styling Lists
By default, list items have either bullets or numbers, depending on the list type. However, CSS offers a number of techniques for customizing the style and positioning of list item markers.
List Style Type
The 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 (ul or 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.
Nested Lists
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?
Default Padding
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. padding-left: 0;
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: