CSS Lists

Introduction to CSS Lists

Theory: List styling improves structure and readability. Proper spacing, markers, and grouping make content easier to scan.

List Styling Basics

Theory: List styling improves structure and readability. Proper spacing, markers, and grouping make content easier to scan.

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.feature-list li {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

Custom Bullets and Markers

Theory: This topic explains practical CSS concepts used in real interfaces. Understanding the theory helps you choose the right properties and patterns.

.custom-list {
    list-style: none;
    padding-left: 0;
}
.custom-list li {
    position: relative;
    padding-left: 1.5rem;
}
.custom-list li::before {
    content: "✔";
    color: #16a34a;
    position: absolute;
    left: 0;
}

Horizontal Navigation Lists

Theory: List styling improves structure and readability. Proper spacing, markers, and grouping make content easier to scan.

.nav-list {
    display: flex;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-list a {
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
}
.nav-list a:hover { background: #eff6ff; }

CSS Lists Best Practices

Theory: List styling improves structure and readability. Proper spacing, markers, and grouping make content easier to scan.

• Use semantic ul and ol in HTML first.
• Keep list spacing consistent with utility classes.
• Use custom bullets only when it improves clarity.
• Preserve readability for nested lists.

Extended Tutorial: Counters & Nested Lists

Theory: CSS counters let you style ordered lists beyond default decimals—useful for legal docs, tutorials, and nested outlines.

ol.chapters {
    counter-reset: chapter;
    list-style: none;
    padding-left: 0;
}

ol.chapters > li {
    counter-increment: chapter;
    margin-bottom: 1rem;
}

ol.chapters > li::before {
    content: "Chapter " counter(chapter) ": ";
    font-weight: 700;
    color: #0f172a;
}