The list-style-type property in CSS allows you to customize the appearance of list items. It controls the type of marker or bullet used to denote each item within a list.
Available Values
The list-style-type property accepts various values to specify different types of markers:
Keyword Values:
disc: Default value. Uses a solid filled circle as the marker.circle: Uses an open circle as the marker.square: Uses a square as the marker.none: Removes any markers from the list items.decimal: Numbers the items using Arabic numerals (1, 2, 3, …).decimal-leading-zero: Numbers the items using Arabic numerals with leading zeros (01, 02, 03, …).lower-roman: Numbers the items using lowercase Roman numerals (i, ii, iii, …).upper-roman: Numbers the items using uppercase Roman numerals (I, II, III, …).lower-alpha: Letters the items using lowercase letters (a, b, c, …).upper-alpha: Letters the items using uppercase letters (A, B, C, …).
Image Values:
url(image-url): Specifies an image to be used as the marker. The image should be a transparent PNG or GIF.
Example
ul {
list-style-type: square; /* Uses square markers */
}
ol {
list-style-type: lower-roman; /* Numbers items using lowercase Roman numerals */
}Additional Notes
- You can combine the
list-style-typeproperty with other list properties likelist-style-positionandlist-style-imageto further customize the appearance of your lists. - For more complex list styles, consider using CSS counters or creating custom markers with image sprites.