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 markercircle
: Hollow circle markersquare
: Filled square markerdecimal
: 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:
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:
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 itemoutside
: Marker appears outside the box of the list item
Let's see an example of how to use the list-style-position
property:
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.