Learn how to style an ordered list with lowercase roman numbers in CSS.
To make an ordered list in HTML, you use:
- The
<ol>tag to define your ordered list element. - The
<li>tag to define your list item elements.
Example:
<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>By default, ordered list items are styled with regular decimal numbers:
- List item
- List item
- List item
The default ordered list with decimal numbers, comes from the User-Agent Stylesheet (UAS) which is built-in, in all browsers. It’s defined with the CSS property: list-style-type: decimal;
How to add lowercase roman numbers with CSS
To create a list with lowercase roman numbers you need to override the default decimal style numbers, with the CSS property list-style-type:
ol {
list-style-type: lower-roman;
}Lowercase roman numbers example:
- List item
- List item
- List item
