CSS Getting started with CSS Styling Lists with CSS
Example
There are three different properties for styling list-items: list-style-type, list-style-image, and list-style-position, which should be declared in that order. The default values are disc, outside, and none, respectively. Each property can be declared separately, or using the list-style shorthand property.
list-style-type defines the shape or type of bullet point used for each list-item.
Some of the acceptable values for list-style-type:
- disc
- circle
- square
- decimal
- lower-roman
- upper-roman
- none
(For an exhaustive list, see the W3C specification wiki)
To use square bullet points for each list-item, for example, you would use the following property-value pair:
li {
list-style-type: square;
}
The list-style-image property determines whether the list-item icon is set with an image, and accepts a value of none or a URL that points to an image.
li {
list-style-image: url(images/bullet.png);
}
The list-style-position property defines where to position the list-item marker, and it accepts one of two values: "inside" or "outside".
li {
list-style-position: inside;
}
