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.
• Set an image as the list item marker.
• Add background colors to lists and list items.

1. list-style-type

Specifies the type of list item marker.

• Unordered List: circle, square, disc (default), none.
• Ordered List: decimal (1, 2, 3), lower-alpha (a, b, c), upper-roman (I, II, III).

ul.a {
  list-style-type: circle;
}
ol.d {
  list-style-type: lower-alpha;
}

2. list-style-image

Specifies an image as the list item marker.

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

3. list-style-position

Specifies the position of the list-item markers (bullet points).

• outside: Means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default.
• inside: Means that the bullet points will be inside the list item. As it is part of the list item text, it will push the text at the start.

4. list-style (Shorthand)

It is a shorthand property. It sets all the list properties in one declaration: list-style: type position image;

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