CSS Lists - Detailed Overview

Introduction to CSS Lists

Lists in HTML can be styled using CSS. There are two main types of lists: ordered lists and unordered lists. CSS provides various properties to style these lists and their items.

Styling Unordered Lists

Unordered lists are styled with bullets by default. You can customize the appearance of these bullets using CSS:

ul {
    list-style-type: square;
}

• Item 1
• Item 2
• Item 3

Styling Ordered Lists

Ordered lists are styled with numbers by default. You can customize the numbering using CSS:

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

1. First item
2. Second item
3. Third item

Removing List Markers

You can remove list markers entirely by setting the list-style-type to none:

ul {
    list-style-type: none;
}

• No bullets here
• Just plain text

Customizing List Item Markers

You can use custom images as list item markers by setting the list-style-image property:

ul.custom-image {
    list-style-image: url('path/to/image.png');
}

• Custom marker 1
• Custom marker 2
• Custom marker 3