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:

• disc - Used to display a filled circle as a bullet point.
• circle - Used to display an empty circle as a bullet point.
• square - Used to display a filled square as a bullet point.
• decimal - Used to display numbers as a bullet point.
• decimal-leading-zero - Used to display numbers with a leading zero as a bullet point.
• lower-roman - Used to display lowercase roman numbers as a bullet point.
• upper-roman - Used to display uppercase roman numbers as a bullet point.
• lower-alpha - Used to display lowercase alphabets as a bullet point.
• upper-alpha - Used to display uppercase alphabets as a bullet point.
• none - Used to remove the bullet point.

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

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

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

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

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

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

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

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

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:

• inside - Used to display the content inside the bullet.
• outside - Used to display the content outside the bullet.

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

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

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

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

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

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

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.

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

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