Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Lists, Tables & Forms

CSS Lists

Written by Updated

The CSS Lists properties are used to customize the appearance of ordered and unordered lists.

The CSS Lists properties are used to customize the appearance of ordered (<ol>) and unordered (<ul>) lists.

By default, browsers display:

  • Unordered lists with bullets (•)
  • Ordered lists with numbers (1, 2, 3...)

CSS allows you to:

  • Change list marker styles
  • Use custom images as markers
  • Control marker position
  • Remove markers completely

List styling is commonly used in:

  • Navigation menus
  • Sidebars
  • Feature lists
  • Content sections

Syntax

CSS Lists Syntax

css

selector {
    list-style-type: value;
}

CSS Lists Example

css

ul {
    list-style-type: square;
}

This changes the bullet style from a circle to a square.

Attributes

PropertyDescriptionExample
list-style-typeSets marker typelist-style-type: square;
list-style-imageUses an image as markerlist-style-image: url("icon.png");
list-style-positionSets marker positionlist-style-position: inside;
list-styleShorthand propertylist-style: square inside;
list-style-type: noneRemoves markerslist-style-type: none;

Example

CSS Lists Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Lists Example</title>
    <style>
        .square-list {
            list-style-type: square;
        }
        .roman-list {
            list-style-type: upper-roman;
        }
        .menu-list {
            list-style-type: none;
            padding: 0;
        }
        .menu-list li {
            display: inline-block;
            margin-right: 15px;
        }
    </style>
</head>
<body>
    <h2>Square List</h2>
    <ul class="square-list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <h2>Roman Number List</h2>
    <ol class="roman-list">
        <li>Introduction</li>
        <li>Syntax</li>
        <li>Examples</li>
    </ol>
    <h2>Navigation Menu</h2>
    <ul class="menu-list">
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</body>
</html>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
list-style11211

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. The supporting concepts are explained in Generated Content and CSS Pseudo Elements.

Notes

  • list-style-type works with both ordered and unordered lists.
  • list-style-type: none; is commonly used for navigation menus.

Common unordered list styles:

  • disc
  • circle
  • square

Common ordered list styles:

  • decimal
  • upper-roman
  • lower-roman
  • upper-alpha
  • lower-alpha

Common List Style Types

ValueResult
disc●
circle○
square■
decimal1, 2, 3
upper-romanI, II, III
lower-alphaa, b, c

Conclusion

CSS Lists allow you to customize how list items are displayed on a webpage. Whether you need simple bullet styles, Roman numerals, or navigation menus without markers, CSS provides flexible options for creating clean and visually appealing lists.

PreviousCSS SubgridNextCSS Tables