CSS List-Style-Type Property

If no value is specified for an unordered list, disc is the default.

For ordered lists, the possible values for list-style-type are as follows:

Several examples are shown below:

Example 1: Ordered list with upper-roman style

CSS Declaration

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

The following HTML code,

<ol>   <li>item 1</li>   <li>item 2</li>   <li>item 3</li> </ol>

results in the following,

1. item 1
2. item 2

In Example 1, the ordered list is shown using upper-case Roman numerals.

Example 2: Ordered list with decimal-leading-zero style

CSS Declaration

ol {list-style-type:decimal-leading-zero;}

The following HTML code,

<ol>   <li>item 1</li>   <li>item 2</li>   <li>item 3</li>   <li>item 4</li>   <li>item 5</li>   <li>item 6</li>   <li>item 7</li>   <li>item 8</li>   <li>item 9</li>   <li>item 10</li> </ol>

results in the following,

1. leading zero item 1
2. leading zero item 2
3. leading zero item 3
4. leading zero item 4
5. leading zero item 5
6. leading zero item 6
7. leading zero item 7
8. leading zero item 8
9. leading zero item 9
10. leading zero item 10

In Example 2, the list is ordered numerically, with a zero to the left of the number. Note this only applies to the first nine items on the list. Starting with the tenth item, there is no longer a zero to the left of the number. In other words, the tenth item shows up as "10." and not "010."

Example 3: Unordered list

CSS Declaration

ul {list-style-type:square;}

The following HTML code,

<ul>   <li>square item 1</li>   <li>square item 2</li> </ul>

results in the following,

• square item 1
• square item 2

In Example 3, the bullet point is represented by a square.