CSS Lists

CSS includes a number of list properties to help you style your HTML lists.

List Style Type

Determines what the bullet looks like. For info on the possible values see the list-style-type page.

Code	Result
<ul style="list-style-type:circle;"> <li>List item one</li> <li>List item two</li> </ul>	List item one List item two

For more information on using images for your bullet points, see list-style-image.

Code	Result
<ul style="list-style-image: url(/pix/printer_icon.gif);"> <li>List item one</li> <li>List item two</li> </ul>	List item one List item two

Determines whether the bullet is located inside the list's containing box or outside. For more info, see list-style-position.

Code

Result

The list-style property is shorthand for setting the list properties.

Code	Result
<ul style="list-style:square inside;"> <li>List item one</li> <li>List item two</li> </ul>	List item one List item two

Used in conjunction with display:marker, marker-offset specifies the nearest border edges of the marker box and its associated principal box.

Code	Result
<ul> <li style="display:marker;marker-offset:10px;">List item one</li> <li>List item two</li> </ul>	List item one List item two

At the time of writing, browser support for marker-offset was limited.