Styling Lists in CSS


Lists are used to display a group of related items in an ordered or unordered manner.

Unordered lists are shown with a bullet point, and ordered lists are shown with numbers.

Using CSS we can style these list items in a variety of ways. We can change the color, size, and style of the bullets, and we can also change the position of the list items.

In CSS we have following list properties to style list:

  1. list-style-type - This property is used to change the shape of the bullet point.
  2. list-style-position - It controls the content to be displayed before or after the list item.
  3. list-style-image - It is used to add an image as a bullet point.
  4. list-style - It is a shorthand property for the above three properties.

1. CSS list style type

The list-style-type property is used to change the shape of the bullet point. It can be used with both ordered and unordered lists.

The values that can be used with this property are:

CSS list-style-type example
  • Book
  • Pen
  • Table

Let's see an example of how to use this property:

Example

.list-1 {
  list-style-type: disc;
}

.list-2 {
  list-style-type: circle;
}

.list-3 {
  list-style-type: square;
}
Try it

The ordered list marker can be made in number, lower alphabet, upper alphabet, roman, etc.

Example

.list-1 {
  list-style-type: decimal;
}

.list-2 {
  list-style-type: decimal-leading-zero;
}

.list-3 {
  list-style-type: lower-roman;
}
Try it

2. CSS list style position

The list-style-position property specifies whether the content of the list will be inside or outside of the bullet.

The values that can be used with this property are:

CSS list-style-position example
  • Book
  • Pen
  • Table

Example

.list-1 {
  list-style-position: inside;
}

.list-2 {
  list-style-position: outside;
}
Try it

3. An image as a bullet (list-style-image)

The list-style-image property can be used to replace general bullets with an image.

CSS list-style-image example
  • Book
  • Pen
  • Table

Let's see an example of how to use this property:

Example

.list-1 {
  list-style-image: url("tree.jpg");
}
Try it

4. CSS list shorthand (list-style)

The list-style property is a shorthand property for the above three properties.

It can be used to set all three properties in a single declaration.

Syntax:

list-style: list-style-type list-style-position list-style-image;

Note: The order of the values in the list-style property is important.

Example

.list-1 {
  list-style: disc inside url("tree.jpg");
}
Try it

Note: In the list-style property, if somehow the image is unable to load then the default bullet will be displayed.