CSS Lists – A Guide

CSS lists allow developers to style unordered, ordered, and definition lists for better presentation and usability. Lists are commonly used for menus, navigation bars, itemized content, and structured data.

What You Will Learn

1. Understanding HTML Lists
2. Styling Unordered Lists (<ul>)
3. Styling Ordered Lists (<ol>)
4. Customizing List Markers with list-style-type
5. Using Images as List Markers
6. Removing Default List Styles
7. Controlling List Padding and Margins
8. Creating Horizontal Navigation Menus with Lists
9. Styling Nested Lists
10. Best Practices and Common Mistakes

1. Understanding HTML Lists

CSS can be applied to three types of lists:

• Unordered Lists (<ul>) – Uses bullet points.
• Ordered Lists (<ol>) – Uses numbers or letters.
• Definition Lists (<dl> with <dt> and <dd>) – Used for terms and descriptions.

Example: Basic Lists

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

<ol>
    <li>Step One</li>
    <li>Step Two</li>
    <li>Step Three</li>
</ol>

2. Styling Unordered Lists (<ul>)

The default style for an unordered list is a disc (•) marker before each item.

Example: Customizing an Unordered List

ul {
    list-style-type: square; /* Changes bullet shape */
    color: blue;
    font-size: 18px;
}

<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>

Other Bullet Types (list-style-type)

Value	Example
disc	• Default bullet
circle	○ Hollow bullet
square	■ Square bullet
none	No bullet

3. Styling Ordered Lists (<ol>)

Ordered lists use numbers by default, but you can customize them.

Example: Changing Numbering Style

ol {
    list-style-type: upper-roman;
    font-size: 18px;
}

<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

Other Numbering Styles

Value	Example
decimal	1, 2, 3, 4
decimal-leading-zero	01, 02, 03, 04
lower-roman	i, ii, iii, iv
upper-roman	I, II, III, IV
lower-alpha	a, b, c, d
upper-alpha	A, B, C, D

4. Customizing List Markers with list-style-type

The list-style-type property controls the appearance of markers.

Example: Using Different Marker Styles

ul {
    list-style-type: square;
}
ol {
    list-style-type: lower-alpha;
}

<ul>
    <li>Apple</li>
    <li>Banana</li>
</ul>

<ol>
    <li>Step One</li>
    <li>Step Two</li>
</ol>

5. Using Images as List Markers

You can use custom images instead of default bullets.

Example: Using an Image as a Marker

ul {
    list-style-image: url('marker.png');
}

<ul>
    <li>Item One</li>
    <li>Item Two</li>
</ul>

• The list-style-image replaces bullets with an image.
• The image should be small and well-aligned.

6. Removing Default List Styles

Some designs require lists without bullets or numbers.

Example: Removing Bullet Points

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

<ul>
    <li>Item One</li>
    <li>Item Two</li>
</ul>

7. Controlling List Padding and Margins

Browsers apply default padding and margins to lists.

Example: Adjusting Spacing

ul {
    margin: 10px 0;
    padding: 5px 20px;
}

• margin controls the space outside the list.
• padding controls the space inside the list.

8. Creating Horizontal Navigation Menus with Lists

Lists are commonly used for navigation bars.

Example: Horizontal List Menu

ul.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

ul.menu li {
    margin-right: 15px;
}

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

• display: flex; makes the list horizontal.
• margin-right: 15px; adds spacing between items.

9. Styling Nested Lists

Nested lists require additional styling to improve readability.

Example: Styling Nested Lists

ul {
    list-style: square;
}

ul ul {
    list-style: circle;
    margin-left: 20px;
}

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Carrot</li>
            <li>Broccoli</li>
        </ul>
    </li>
</ul>

• Parent list uses squares.
• Nested list uses circles.

10. Best Practices and Common Mistakes

Best Practices

Use list-style: none; for navigation menus.
Use list-style-image for custom icons.
Use CSS for spacing instead of empty list items.
Use padding and margin correctly for spacing.
Make sure list markers align properly.

Common Mistakes and How to Fix Them

Mistake	Solution
Forgetting list-style: none; on navigation lists	Remove default bullets for menus.
Not using padding for nested lists	Add margin-left for proper alignment.
Overusing images for list markers	Keep lists simple for better readability.
Using <ul> instead of <ol> for step-based lists	Use ordered lists for numbered sequences.

Conclusion

• Use list-style-type to change bullets and numbers.
• Remove bullets with list-style: none;.
• Use padding and margins to adjust spacing.
• Style nested lists differently for clarity.
• Use CSS Flexbox to create horizontal menus.