CSS Styling Lists

There are three different properties for styling list-items: list-style-type, list-style-image, and list-styleposition, 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.

Some of the acceptable values for list-style-type:

• disc
• circle
• square
• decimal
• lower-roman
• upper-roman
• none

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  ;
}