CSS Lists

Lists are a fundamental part of web content, used to display items in a structured manner. CSS provides several ways to style lists, including customizing the list markers, spacing, and alignment.

Styling Lists

CSS allows you to style both ordered lists (<ol>) and unordered lists (<ul>). You can control the appearance of list markers, list items, and overall list layout.

List Types

The list-style-type property is used to specify the type of marker for lists. Some common values include:

disc - The default filled circle for unordered lists.
circle - An empty circle for unordered lists.
square - A filled square for unordered lists.
decimal - Numbers for ordered lists.
lower-alpha - Lowercase letters for ordered lists.
upper-roman - Uppercase Roman numerals for ordered lists.

Syntax

The syntax for styling list types is:


/* List Style Syntax */
ul {
    list-style-type: ;
}

ol {
    list-style-type: ;
}

Examples

Example 1: Unordered List


/* Unordered List Styling */
ul {
    list-style-type: disc;
    padding-left: 20px;
}

ul.circle {
    list-style-type: circle;
}

ul.square {
    list-style-type: square;
}

Item 1
Item 2
Item 3

Item A
Item B
Item C

Item X
Item Y
Item Z

Example 2: Ordered List


/* Ordered List Styling */
ol {
    list-style-type: decimal;
    padding-left: 20px;
}

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

ol.roman {
    list-style-type: upper-roman;
}

First
Second
Third

First
Second
Third

First
Second
Third

Example 3: Custom List Markers


/* Custom List Markers */
ul.custom-markers {
    list-style-type: none; /* Remove default markers */
    padding-left: 0;
}

ul.custom-markers li {
    position: relative;
    padding-left: 20px;
}

ul.custom-markers li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ff5722;
    font-size: 1.5rem;
}

Custom Marker 1
Custom Marker 2
Custom Marker 3