CSS Styling Lists

List properties are used to control the styling of list elements such as presentation of number and bulleted list, markers used for list items as well as their positions. All the list properties can either be used on <ul> and <ol> elements or an<li> element only.

CSS List·Style·Type

The LIST-STYLE-TYPE property allows changing the appearance of the list item marker. In case of unordered list, the values that this property can hold are none, disc (default), circle and square. In case of ordered list, the values that this property can hold are decimal, decimal leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman. For example:

Li {List-Style-Type: square;}

CSS List-Style-Image

The LIST-STYLE-IMAGE property allows you to set an image for the list item marker. It is ideal for situations when you want to use customized list markers. If an image is unavailable, the image marker defined in list-style-type will be used. The possible values that can set to this property are none or URL of an image. For example:

Li{list-style-image : url(floppy.gif);}

CSS List-Style-Position

The LIST-STYLE-POSITION property is used to specify the list item marker i.e. whether it should be inside or outside of the box containing <list> element. The possible values that can be assigned to its are inside or outside (default). For example:

ul{list-style-position : inside;} 
 ol{list-style-position : outside;}

 CSS List-Style

The LIST -STYLE property is a shorthand property used to set all the three list-style Properties in a single statement in any order. If you do not explicitly specify any of these properties then they assume their default values. For examples:

Ul{list-style : circle inside url(floppy.gif);}

We shall now consider an example showing list properties.