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:

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:

Practice Exercise