CSS Lists

31 March 2025 | Category: CSS

Lists are a fundamental part of HTML and CSS. They help organize content efficiently. In this guide, we will cover everything about CSS lists, including types, styling, custom bullets, icons, ordered and unordered lists, hover effects, and more!

1️⃣ Types of HTML Lists

Before styling lists with CSS, let’s understand the three main types of lists in HTML:

List Type	Description	Example Tag
Unordered List	Uses bullets (`•`, `◦`, `▪`)	`<ul>`
Ordered List	Uses numbers (`1, 2, 3`) or letters (`A, B, C`)	`<ol>`
Definition List	Uses term and description format	`<dl>`

Basic Examples

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

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

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
</dl>

2️⃣ Default List Styling

By default:

<ul> items have bullets (•).
<ol> items have numbers (1, 2, 3, ...).
<dl> doesn’t use bullets or numbers.

We can customize lists using CSS properties.

3️⃣ Removing Default List Styles

If you want a clean list (without bullets or numbers):

Example

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

🔹 list-style: none; → Removes bullets/numbers.
🔹 padding: 0; margin: 0; → Removes extra spacing.

4️⃣ Changing List Style Types

The list-style-type property allows different styles.

Value	Description	Example
`disc`	Default bullet `•`	● Item
`circle`	Hollow circle `○`	○ Item
`square`	Square `▪`	▪ Item
`decimal`	Numbers `1, 2, 3...`	1. Item
`lower-alpha`	Lowercase letters `a, b, c...`	a. Item
`upper-alpha`	Uppercase letters `A, B, C...`	A. Item
`lower-roman`	Roman numerals `i, ii, iii...`	i. Item
`upper-roman`	Roman numerals `I, II, III...`	I. Item

Example

ul {
    list-style-type: square;
}

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

5️⃣ Customizing List Markers

The list-style property allows you to:

Set a custom marker (image)
Position the marker
Remove it completely

Example

ul {
    list-style: url('bullet.png') inside;
}

🔹 url('bullet.png') → Uses an image as a bullet.
🔹 inside → Moves bullet inside the text (default is outside).

6️⃣ Custom Icons as Bullets

Instead of images, you can use CSS pseudo-elements (::before) with icons.

Example (Using FontAwesome)

<ul class="custom-list">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>

.custom-list li {
    list-style: none;
    position: relative;
    padding-left: 25px;
}
.custom-list li::before {
    content: "✔"; /* Unicode icon */
    position: absolute;
    left: 0;
    color: green;
}

✅ Now, list items start with a checkmark (✔) instead of bullets.

7️⃣ Styling Nested Lists

Lists inside lists (nested lists) need special styling.

Example

<ul class="nested">
    <li>Item 1</li>
    <li>Item 2
        <ul>
            <li>Sub-item 1</li>
            <li>Sub-item 2</li>
        </ul>
    </li>
</ul>

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

📌 Now, sub-lists will have hollow circles (○) instead of regular bullets (•).

8️⃣ Inline Lists (Horizontal Menus)

Lists can be styled as horizontal menus using display: inline-block;.

Example

.inline-list {
    padding: 0;
    list-style: none;
}
.inline-list li {
    display: inline-block;
    margin-right: 15px;
}

<ul class="inline-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

🚀 Now, list items appear in a row instead of a column!

9️⃣ Adding Hover Effects

You can add hover effects to list items for better interaction.

Example

ul li:hover {
    background-color: lightgray;
    cursor: pointer;
}

🎨 Now, list items change color when hovered!

🔟 Full Example: Stylish Lists

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Lists</title>
    <style>
        ul {
            list-style-type: square;
            padding-left: 20px;
        }
        ol {
            list-style-type: upper-roman;
            padding-left: 20px;
        }
        .custom-list li {
            list-style: none;
            position: relative;
            padding-left: 25px;
        }
        .custom-list li::before {
            content: "✔";
            position: absolute;
            left: 0;
            color: green;
        }
        .inline-list {
            padding: 0;
            list-style: none;
        }
        .inline-list li {
            display: inline-block;
            margin-right: 15px;
        }
        ul li:hover {
            background-color: lightgray;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>Unordered List</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>

    <h2>Ordered List</h2>
    <ol>
        <li>First</li>
        <li>Second</li>
    </ol>

    <h2>Custom List</h2>
    <ul class="custom-list">
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>

    <h2>Inline List (Menu)</h2>
    <ul class="inline-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>

🛠️ Try this code and see different list styles in action!

🚀 Conclusion

Feature	CSS Property	Example
Remove Default Bullets	`list-style: none;`	No markers
Change List Type	`list-style-type`	`square, decimal, roman`
Custom Icons	`::before` + Unicode	Checkmarks (✔)
Nested Lists	`margin-left`	Indentation
Horizontal Menus	`display: inline-block;`	Navbar menus
Hover Effects	`:hover`	Change background