CSS list-style

The list-style property in CSS is used to specify the style of the list item marker in a list. This property allows you to change the appearance of the bullet point or numbering of a list. You can customize the type, size, and color of the marker using different values.

list-style-type

The list-style-type property is used to specify the type of marker to use in a list. The following values can be used:

disc: Default filled circle marker
circle: Hollow circle marker
square: Filled square marker
decimal: Decimal numbers (1, 2, 3, ...)
decimal-leading-zero: Decimal numbers with leading zeros (01, 02, 03, ...)
lower-roman: Lowercase Roman numerals (i, ii, iii, ...)
upper-roman: Uppercase Roman numerals (I, II, III, ...)

Let's see an example of how to use the list-style-type property:

Result:

Item 1
Item 2
Item 3



  Item 1
  Item 2
  Item 3

list-style-image

The list-style-image property is used to specify an image as the marker for a list item. You can use a URL to specify the path to the image file you want to use as the marker.

Here is an example of using the list-style-image property:

Result:

Item 1
Item 2
Item 3



  Item 1
  Item 2
  Item 3

list-style-position

The list-style-position property is used to specify the position of the marker in a list item. The following values can be used:

inside: Marker appears inside the box of the list item
outside: Marker appears outside the box of the list item

Let's see an example of how to use the list-style-position property:

Result:

Item 1
Item 2
Item 3



  Item 1
  Item 2
  Item 3

By using the list-style property, you can easily customize the appearance of list item markers in your HTML documents.