Skip to main content

CSS Lists: Customize Bullets and Numbering

Lists can be styled using various properties to control the appearance of bullet points or numbering, as well as the spacing and indentation of list items.

Here are some common CSS properties for styling lists:

The list-style-type​

This property specifies the type of bullet or numbering for a list. The values can be "none", "disc", "circle", "square", "decimal", "lower-roman", "upper-roman", "lower-alpha", or "upper-alpha".

As an example:

Editor

Loading...

In this example:

  • We've added a style element to the head section of the HTML file. - The style element contains CSS code that sets the list-style-type property of all ordered lists (<ol> elements) to use lowercase Roman numerals.

The list-style-position​

The list-style-position property specifies whether the bullet or numbering should appear inside or outside the content box of the list item. The values can be"inside"or"outside".

As an example:

Editor

Loading...

In this example:

  • We've added a style element to the head section of the HTML file.
  • The style element contains CSS code that sets the list-style-position property of all unordered lists (<ul> elements) to inside.

The list-style-image​

The list-style-image property allows you to use a custom image for the bullet or numbering instead of the default symbol. You can specify the URL of the image file as the value.

As an example:

Editor

Loading...

In this example:

  • We've added a style element to the head section of the HTML file. - The style element contains CSS code that sets the list-style-image property of all unordered lists (<ul> elements) to use a bullet image named bullet.png.

The padding-left​

The padding-left property specifies the amount of space between the left edge of the list item and the left edge of the content box.

As an example:

Editor

Loading...

In this example:

  • We've added a style element to the head section of the HTML file.
  • The style element contains CSS code that sets the padding-left property of all unordered lists (<ul> elements) to 20px, and the padding-left property of all ordered lists (<ol> elements) to 30px. - This adds some space between the bullet points or numbering and the text of each list item.

The margin-top and margin-bottom​

These properties specify the amount of space between list items.

As an example:

Editor

Loading...

In this example:

  • We've added a style element to the head section of the HTML file. - The style element contains CSS code that sets the margin-top property of all unordered lists (<ul> elements) to 20px, and the margin-bottom property of all unordered lists to 20px as well.
  • We've set the margin-top property of all ordered lists (<ol> elements) to 30px, and the margin-bottom property of all ordered lists to 30px.

Remove Default Settings​

An example of how to remove the default settings of a list:

Editor

Loading...

In this example:

  • We've added a style element to the head section of the HTML file. - The style element contains CSS code that sets the list-style-type property of all unordered lists (<ul> elements) to none, which removes the default bullet points.
  • We've also set the margin and padding properties to 0 to remove any default spacing around the list.

List - Shorthand property​

An example of how to use the shorthand list-style property:

Editor

Loading...

In this example:

  • We've used the shorthand list-style property to set the list style for both unordered (<ul>) and ordered (<ol>) lists.
  • The list-style property includes three sub-properties: list-style-type, list-style-position, and list-style-image.
  • We've used the value square for list-style-type to display square bullets, the value inside for list-style-position to position the bullets inside the list items, and the url() function to specify a custom image for the bullets.