Lists

The bullet point, or number in the case of numbered lists, is referred to as the marker.

The list-style-type Property: The list-style-type property allows you to control the shape or style of bullet point (also known as a marker)

The list-style property can either be used on the <ul> and <ol> elements or on the <li> element.

Example:

li.a {list-style:none;}

li.b {list-style:disc;}

li.c {list-style:circle;}

li.d {list-style:square;}

li.e {list-style:decimal;}

li.f {list-style:lower-alpha;}

li.g {list-style:upper-alpha;}

li.h {list-style:lower-roman;}

li.i {list-style:upper-roman;}

The list-style-position Property: The list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points.

Example:

ul {list-style-position:outside; }

ol {list-style-position:inside; }

The list-style-image Property: The list-style-image property allows you to specify an image so that you can use your own bullet style.

li {list-style-image: url(“images/bulletpoint.gif”);}

If the image cannot be displayed, the browser should just display a dot rather than a broken image symbol.

The list-style Property: The list-style property is a way of expressing the other three properties at once.

ul {list-style: inside circle;}

The marker-offset Property: The marker-offset property allows you to specify the distance between the marker and the text relatingto that marker.

li {marker-offset:2em;}