CSS Lists, Tables & Forms

CSS Lists

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

Property	Description	Example
list-style-type	Sets marker type	list-style-type: square;
list-style-image	Uses an image as marker	list-style-image: url("icon.png");
list-style-position	Sets marker position	list-style-position: inside;
list-style	Shorthand property	list-style: square inside;
list-style-type: none	Removes markers	list-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>

Output

Browser Output

css

The first list will display square bullets
The second list will display Roman numerals (I, II, III)
The third list will appear as a horizontal navigation menu without bullets

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

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

Value	Result
disc	●
circle	○
square	■
decimal	1, 2, 3
upper-roman	I, II, III
lower-alpha	a, 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 Z-index NextCSS Tables