Using the CSS list-style property

The list-style property of CSS enables to set the bullet type, position and replacing a bullet type with an image by specifying them all together in a single declaration by passing the suitable combination of values. The CSS list-style property accepts 3 parameters for setting the type, image and position for the list items of any HTML ordered or unordered list element.

Syntax

list-style: [list-style-type] [list-style-image] [list-style-position];

1. Bullet Type can be specified using one of the predefined name of the type available in CSS e.g.:
circle, decimal, disc etc. [See list-style-type property]

2. Image can be specified by adding the image path as a second parameter of the list-style property that appears as bullet image in front of list item of the associated ordered or unordered list element of HTML. [See list-style-image property]

3. Position for the bullet can be changed by setting the value for the third parameter of this property. [See list-style-position property]

Examples

list-style: disc;

list-style: disc url('bullet.gif');

list-style: disc inside;

list-style: disc url('bullet.gif') inside;

In the above examples you can see the way of declaring different types of list-style property values by specifying the combination of parameter values.

Continue to next tutorial: Setting the CSS list-style-type property to learn how to change the bullet type of HTML lists.