Styling lists

It is possible to change how the default list looks, both ordered and unordered lists. You can do this by changing the bullet point, and where the bullet should be located.

The list-style-type property allows you to control the shape or style of a bullet point. It can be used on rules that apply to the <ol>, <ul> and <li> elements.

For an unordered list you can use the following values:

<ul>
    <li style="list-style-type: none;">none</li>
    <li style="list-style-type: disc;">disc</li>
    <li style="list-style-type: circle;">circle</li>
    <li style="list-style-type: square;">square</li>
</ul>

For an ordered (numbered) list you can use the following values:

<ol>
    <li style="list-style-type: decimal;">decimal</li>
    <li style="list-style-type: decimal-leading-zero;">decimal-leading-zero</li>
    <li style="list-style-type: lower-alpha;">lower-alpha</li>
    <li style="list-style-type: upper-alpha;">upper-alpha</li>
    <li style="list-style-type: lower-roman;">lower-roman</li>
    <li style="list-style-type: upper-roman;">upper-roman</li>
</ol>

You can also replace the bullet with an image, using the list-style-image property. The value for this property starts with the letters url, and is followed by a pair of parentheses. Inside the parentheses, the path to the image is given inside double quotes. This rule can be used on rules that apply to the <ul> and <li> elements.

Lists are indented into the page by default and the list-style-position property indicates whether the marker should appear on the inside or the outside of the box containing the main points. This property can take one of two values:

• outside: The marker sits to the left of the block of text (this is the default behaviour if this property is not used)

• inside: The marker sits inside the box of text (which is indented).