Free web tools

List style type

By default ordered lists will be displayed with ascending numbers and unordered lists with bullet points. Using CSS both of these can be changed or removed completely.

Ordered lists

Returning to the first example list on this page:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

As shown at the start of this tutorial this list display with the numbers 1 to 3 as the "list markers". Using the property list-style-type we can change this:

ol {
    list-style-type:lower-roman;
}

Our list now uses lowercase roman numerals:

1. First item
2. Second item
3. Third item

ol {
    list-style-type:upper-alpha;
}

This results in a list with uppercase letters used as markers:

1. First item
2. Second item
3. Third item

There a number of other values this property can take for ordered lists, here is a table with a simple example for reference:

Unordered lists

Unordered lists by default display with a 'disc' - a solid black bullet point. Observe:

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Will output:

• First item
• Second item
• Third item

We can use the list-style-type to change this to either a circle or a square:

ul {
    list-style-type:circle;
}

Will make all unordered lists on the page use list item markers:

• First item
• Second item
• Third item

Square markers are achieved in a similar way:

ul {
    list-style-type:square;
}

This will make all unordered lists on the page use square list item markers:

• First item
• Second item
• Third item

These are the only 3 options that can be used with unordered lists.

Removing list markers

List markers can be removed from both unordered and ordered lists by simply setting the list-style-property to "none":

ul, ol {
    list-style-type:none;
}

None all lists, both unordered and ordered, will not use any markers:

• First item
• Second item
• Third item