Article Categories

Selected Reading

Style the numbering characters in an ordered list with CSS

Javascript Web Development Front End Scripts

The list-style-type property allows you to control the appearance and style of numbering characters in ordered lists. This CSS property offers various numbering formats including decimal, roman numerals, letters, and more.

Syntax

list-style-type: decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;

Common list-style-type Values

Value	Description	Example Output
`decimal`	Default numbers	1, 2, 3
`lower-roman`	Lowercase Roman numerals	i, ii, iii
`upper-roman`	Uppercase Roman numerals	I, II, III
`lower-alpha`	Lowercase letters	a, b, c
`upper-alpha`	Uppercase letters	A, B, C

Example: Different Numbering Styles

<!DOCTYPE html>
<html>
<head>
    <style>
        .decimal { list-style-type: decimal; }
        .roman { list-style-type: lower-roman; }
        .alpha { list-style-type: upper-alpha; }
        .no-style { list-style-type: none; }
    </style>
</head>
<body>
    <h3>Decimal (default):</h3>
    <ol class="decimal">
        <li>India</li>
        <li>US</li>
        <li>UK</li>
    </ol>
    
    <h3>Roman numerals:</h3>
    <ol class="roman">
        <li>India</li>
        <li>US</li>
        <li>UK</li>
    </ol>
    
    <h3>Uppercase letters:</h3>
    <ol class="alpha">
        <li>India</li>
        <li>US</li>
        <li>UK</li>
    </ol>
    
    <h3>No numbering:</h3>
    <ol class="no-style">
        <li>India</li>
        <li>US</li>
        <li>UK</li>
    </ol>
</body>
</html>

Output

Decimal (default):
1. India
2. US
3. UK

Roman numerals:
i. India
ii. US
iii. UK

Uppercase letters:
A. India
B. US
C. UK

No numbering:
India
US
UK

Custom Counter Styling

You can also create custom numbering with the counter-reset and counter-increment properties for more advanced control:

<!DOCTYPE html>
<html>
<head>
    <style>
        .custom-list {
            counter-reset: my-counter;
            list-style: none;
        }
        .custom-list li {
            counter-increment: my-counter;
        }
        .custom-list li::before {
            content: "Step " counter(my-counter) ": ";
            font-weight: bold;
            color: blue;
        }
    </style>
</head>
<body>
    <ol class="custom-list">
        <li>Plan the project</li>
        <li>Write the code</li>
        <li>Test thoroughly</li>
    </ol>
</body>
</html>

Conclusion

The list-style-type property provides flexible control over ordered list numbering. Use built-in values like decimal, roman, or alpha for standard formats, or combine with CSS counters for custom styling.

Samual Sam

Updated on: 2026-03-15T23:18:59+05:30

442 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next