CSS Lists

HTML provides two main types of lists: Unordered Lists (<ul>) and Ordered Lists (<ol>). CSS allows us to style these lists in detail, including changing the type and position of the list item marker, or even using custom images as markers.

list-style-type

The list-style-type property is used to change the style of the list item marker.

Unordered Lists (<ul>)

• disc: (Default) Solid circle.
• circle: Hollow circle.
• square: Solid square.
• none: No marker is shown.

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

Ordered Lists (<ol>)

• decimal: (Default) Arabic numerals (1, 2, 3, ...).
• decimal-leading-zero: Numbers with leading zeros (01, 02, 03, ...).
• lower-roman: Lowercase Roman numerals (i, ii, iii, ...).
• upper-roman: Uppercase Roman numerals (I, II, III, ...).
• lower-alpha / lower-latin: Lowercase English letters (a, b, c, ...).
• upper-alpha / upper-latin: Uppercase English letters (A, B, C, ...).

ol.a {
  list-style-type: upper-roman;
}

ol.b {
  list-style-type: lower-alpha;
}

list-style-image

If you want to use a custom image as the list item marker, you can use the list-style-image property.

ul {
  list-style-image: url('sqpurple.gif');
}

list-style-position

The list-style-position property specifies whether the list item markers appear inside or outside the content flow.

• outside: (Default) The marker is placed outside the list item's content. The first line of text aligns with the marker, but subsequent lines of wrapped text do not.
• inside: The marker is placed inside the list item's content, as if it were the first character of the text. All lines of text align with the marker, forming a neat left border.

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

list-style (Shorthand Property)

You can use the list-style shorthand property to set all list-related styles at once. The order is:

list-style: type position image;

ul {
  list-style: square inside url('sqpurple.gif');
}

If list-style-image is set, list-style-type will be used as a fallback if the image cannot be displayed.

Removing Default Styles

In practice, a common approach is to completely remove the default styles of lists and then use other techniques (such as Flexbox and pseudo-elements) to create fully custom list styles. This offers maximum flexibility.

To remove default styles, you need to:

1. Set list-style-type to none.
2. Set both margin and padding to 0, because browsers usually add default margins and padding to <ul> and <ol> elements.

ul.custom {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

This way, your list becomes a "clean", vertically stacked block-level element consisting of multiple <li> items, which you can layout and style as you wish.