CSS Lists
What is List Styling?
CSS allows you to control the appearance of list elements (<ul>, <ol>, <li>) in detail — from the marker type, position, custom images, to complex counters (numbering).
List styling is very important for:
- Navigation — Dropdown menus, sidebar navigation
- Content — Feature lists, tutorial steps, FAQ
- Data — Pricing tables, product comparisons
- UI components — Checklists, task lists, breadcrumbs
List Styling Properties
list-style-type
Determines the marker type (bullet/number) on a list item.
Bullet Styles
| Value | Description |
|---|---|
disc |
Round bullet (●) — Default for <ul> |
circle |
Hollow circle bullet (○) |
square |
Square bullet (■) |
none |
No marker |
Numbering Styles
| Value | Description |
|---|---|
decimal |
Numbers: 1, 2, 3, ... — Default for <ol> |
decimal-leading-zero |
Numbers with leading zeros: 01, 02, 03, ... |
lower-roman |
Lowercase Roman: i, ii, iii, iv, ... |
upper-roman |
Uppercase Roman: I, II, III, IV, ... |
lower-alpha |
Lowercase letters: a, b, c, d, ... |
upper-alpha |
Uppercase letters: A, B, C, D, ... |
lower-greek |
Lowercase Greek letters: α, β, γ, δ, ... |
lower-latin |
Lowercase Latin letters: a, b, c, d, ... |
upper-latin |
Uppercase Latin letters: A, B, C, D, ... |
None
list-style-type: none;
Removes the marker completely. Very commonly used for:
- Navigation menus (removing the default bullet)
- Custom styled lists
- Dropdown menus
list-style-position
Determines the marker position relative to the content.
| Value | Description |
|---|---|
outside |
Default — Marker is outside the content |
inside |
Marker is inside the content (inline with the text) |
list-style-position: outside; /* Default */
list-style-position: inside; /* Marker inline with the text */
list-style-image
Uses a custom image as a marker.
list-style-image: url('checkmark.png');
Note: If the image fails to load, the browser will display the fallback list-style-type.
list-style (Shorthand)
Combines all list properties in a single declaration:
list-style: [type] [position] [image];
/* Example: list-style: square inside url('bullet.png'); */
Counter
CSS Counters allow complex custom numbering:
counter-reset: myCounter; /* Reset the counter */
counter-increment: myCounter; /* Increment the counter */
content: counter(myCounter); /* Display the counter */
Code Example
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
color: #333;
}
h1 {
margin-bottom: 25px;
}
.section {
background-color: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
h2 {
margin-bottom: 15px;
color: #2c3e50;
}
p {
line-height: 1.6;
color: #555;
margin-bottom: 10px;
}
code {
background-color: #f0f0f0;
padding: 2px 6px;
border-radius: 3px;
font-size: 13px;
}
/* === Bullet Types === */
.list-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.list-box h3 {
font-size: 14px;
margin-bottom: 8px;
color: #2c3e50;
}
.list-box ul {
padding-left: 20px;
}
.list-box ul li {
padding: 4px 0;
font-size: 14px;
color: #555;
}
.list-disc { list-style-type: disc; }
.list-circle { list-style-type: circle; }
.list-square { list-style-type: square; }
.list-none { list-style-type: none; }
.list-decimal { list-style-type: decimal; }
.list-decimal-zero { list-style-type: decimal-leading-zero; }
.list-lower-alpha { list-style-type: lower-alpha; }
.list-upper-alpha { list-style-type: upper-alpha; }
.list-lower-roman { list-style-type: lower-roman; }
.list-upper-roman { list-style-type: upper-roman; }
.list-lower-greek { list-style-type: lower-greek; }
/* === List Position === */
.position-grid {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.position-box {
flex: 1;
min-width: 200px;
}
.position-box h3 {
font-size: 14px;
margin-bottom: 8px;
color: #2c3e50;
}
.pos-outside {
list-style-position: outside;
padding-left: 25px;
}
.pos-inside {
list-style-position: inside;
padding-left: 0;
}
.pos-outside li,
.pos-inside li {
padding: 4px 0;
font-size: 14px;
color: #555;
border-bottom: 1px solid #f0f0f0;
}
/* === Nested Lists === */
.nested-list {
padding-left: 0;
list-style: none;
}
.nested-list > li {
padding: 6px 0;
font-size: 14px;
color: #333;
border-bottom: 1px solid #f0f0f0;
}
.nested-list > li:last-child {
border-bottom: none;
}
.nested-list ul {
padding-left: 20px;
margin-top: 4px;
}
.nested-list ul li {
font-size: 13px;
color: #666;
padding: 3px 0;
border-bottom: 1px solid #f5f5f5;
}
.nested-list ul li:last-child {
border-bottom: none;
}
/* === Feature List === */
.feature-list {
list-style: none;
padding: 0;
}
.feature-list li {
padding: 8px 0 8px 30px;
position: relative;
font-size: 14px;
color: #555;
border-bottom: 1px solid #f0f0f0;
}
.feature-list li:last-child {
border-bottom: none;
}
.feature-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #2ecc71;
font-weight: bold;
font-size: 16px;
}
/* === Custom Counter: Step Indicator === */
.step-list {
list-style: none;
padding: 0;
counter-reset: stepCounter;
}
.step-list li {
counter-increment: stepCounter;
padding: 12px 0 12px 50px;
position: relative;
font-size: 14px;
color: #555;
border-bottom: 1px solid #eee;
}
.step-list li:last-child {
border-bottom: none;
}
.step-list li::before {
content: counter(stepCounter);
position: absolute;
left: 0;
top: 8px;
width: 32px;
height: 32px;
background-color: #3498db;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
}
.step-list li strong {
color: #2c3e50;
}
/* === Custom Counter: Section Number === */
.numbered-sections {
list-style: none;
padding: 0;
counter-reset: sectionCounter;
}
.numbered-sections > li {
counter-increment: sectionCounter;
padding: 15px 0 15px 40px;
position: relative;
font-size: 14px;
color: #555;
border-bottom: 1px solid #eee;
}
.numbered-sections > li:last-child {
border-bottom: none;
}
.numbered-sections > li::before {
content: 'Section ' counter(sectionCounter);
position: absolute;
left: 0;
font-weight: bold;
color: #2c3e50;
font-size: 13px;
}
/* === Pricing Table with Lists === */
.pricing-grid {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.pricing-card {
flex: 1;
min-width: 220px;
background-color: white;
border: 2px solid #eee;
border-radius: 8px;
padding: 24px;
text-align: center;
}
.pricing-card.featured {
border-color: #3498db;
position: relative;
}
.pricing-card.featured::before {
content: 'POPULER';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background-color: #3498db;
color: white;
padding: 4px 16px;
border-radius: 20px;
font-size: 11px;
font-weight: bold;
}
.pricing-card h3 {
font-size: 18px;
margin-bottom: 5px;
color: #2c3e50;
}
.pricing-card .price {
font-size: 32px;
font-weight: bold;
color: #3498db;
margin: 15px 0;
}
.pricing-card .price span {
font-size: 14px;
color: #999;
}
.pricing-features {
list-style: none;
padding: 0;
margin: 20px 0;
text-align: left;
}
.pricing-features li {
padding: 8px 0 8px 28px;
position: relative;
font-size: 14px;
color: #555;
border-bottom: 1px solid #f0f0f0;
}
.pricing-features li:last-child {
border-bottom: none;
}
.pricing-features li::before {
content: '✓';
position: absolute;
left: 0;
color: #2ecc71;
font-weight: bold;
}
.pricing-features li.disabled {
color: #bbb;
}
.pricing-features li.disabled::before {
content: '✕';
color: #e74c3c;
}
.btn-pricing {
display: inline-block;
padding: 10px 24px;
border: 2px solid #3498db;
color: #3498db;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
}
/* === Checklist === */
.checklist {
list-style: none;
padding: 0;
}
.checklist li {
padding: 10px 0 10px 30px;
position: relative;
font-size: 14px;
color: #555;
border-bottom: 1px solid #f0f0f0;
}
.checklist li:last-child {
border-bottom: none;
}
.checklist li::before {
content: '☐';
position: absolute;
left: 0;
font-size: 16px;
color: #bbb;
}
.checklist li.checked::before {
content: '☑';
color: #2ecc71;
}
.checklist li.checked {
color: #999;
text-decoration: line-through;
}
/* === Breadcrumbs === */
.breadcrumb {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.breadcrumb li {
font-size: 14px;
color: #3498db;
}
.breadcrumb li::after {
content: ' / ';
color: #999;
margin-left: 5px;
}
.breadcrumb li:last-child::after {
content: '';
}
.breadcrumb li:last-child {
color: #555;
font-weight: bold;
}
.breadcrumb li a {
color: #3498db;
text-decoration: none;
}
.breadcrumb li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>CSS Lists</h1>
<!-- Bullet Types -->
<div class="section">
<h2>List Style Type Variants</h2>
<p>The various marker types available for lists:</p>
<div class="list-grid">
<div class="list-box">
<h3>Bullet Styles</h3>
<ul class="list-disc">
<li>disc (●)</li>
<li>Default bullet</li>
<li>Very common</li>
</ul>
</div>
<div class="list-box">
<h3>Circle</h3>
<ul class="list-circle">
<li>circle (○)</li>
<li>Empty circle</li>
<li>Sub-bullet</li>
</ul>
</div>
<div class="list-box">
<h3>Square</h3>
<ul class="list-square">
<li>square (■)</li>
<li>Square bullet</li>
<li>Alternatif</li>
</ul>
</div>
<div class="list-box">
<h3>None</h3>
<ul class="list-none">
<li>No marker</li>
<li>For navigation</li>
<li>Custom styling</li>
</ul>
</div>
<div class="list-box">
<h3>Decimal</h3>
<ol class="list-decimal">
<li>Plain numbers</li>
<li>1, 2, 3, ...</li>
<li>Default ordered</li>
</ol>
</div>
<div class="list-box">
<h3>Decimal Leading Zero</h3>
<ol class="list-decimal-zero">
<li>Numbers with 0</li>
<li>01, 02, 03, ...</li>
<li>Cleaner alignment</li>
</ol>
</div>
<div class="list-box">
<h3>Lower Alpha</h3>
<ol class="list-lower-alpha">
<li>Lowercase letters</li>
<li>a, b, c, ...</li>
<li>Alternatif numbering</li>
</ol>
</div>
<div class="list-box">
<h3>Upper Alpha</h3>
<ol class="list-upper-alpha">
<li>Uppercase letters</li>
<li>A, B, C, ...</li>
<li>Alternatif numbering</li>
</ol>
</div>
<div class="list-box">
<h3>Lower Roman</h3>
<ol class="list-lower-roman">
<li>Lowercase Roman</li>
<li>i, ii, iii, ...</li>
<li>Classic format</li>
</ol>
</div>
<div class="list-box">
<h3>Upper Roman</h3>
<ol class="list-upper-roman">
<li>Uppercase Roman</li>
<li>I, II, III, ...</li>
<li>Formal format</li>
</ol>
</div>
</div>
</div>
<!-- List Position -->
<div class="section">
<h2>List Style Position</h2>
<p>Marker position differences: outside (on the outside) vs inside (on the inside):</p>
<div class="position-grid">
<div class="position-box">
<h3>outside (Default)</h3>
<ul class="pos-outside list-disc">
<li>The marker sits outside the text content area. Long text wraps below the marker, not beside it.</li>
<li>More commonly used in modern web design.</li>
<li>The marker does not push the content text.</li>
</ul>
</div>
<div class="position-box">
<h3>inside</h3>
<ul class="pos-inside list-disc">
<li>The marker sits inside the content area and is inline with the text. Long text wraps beside the marker.</li>
<li>Mirrors the default browser bullet behavior.</li>
<li>The marker shifts the content position.</li>
</ul>
</div>
</div>
</div>
<!-- Nested Lists -->
<div class="section">
<h2>Nested Lists</h2>
<p>Styling for nested lists:</p>
<ul class="nested-list">
<li>
<strong>CSS Fundamental</strong>
<ul>
<li>Box Model</li>
<li>Selectors</li>
<li>Specificity</li>
</ul>
</li>
<li>
<strong>CSS Layout</strong>
<ul>
<li>Flexbox</li>
<li>CSS Grid</li>
<li>Positioning</li>
</ul>
</li>
<li>
<strong>CSS Advanced</strong>
<ul>
<li>Animation & Transition</li>
<li>Responsive Design</li>
<li>CSS Variables</li>
</ul>
</li>
</ul>
</div>
<!-- Feature List -->
<div class="section">
<h2>Feature List with Custom Markers</h2>
<p>Using the ::before pseudo-element for custom markers:</p>
<ul class="feature-list">
<li>Learn CSS from basic to advanced</li>
<li>Interactive code examples in every tutorial</li>
<li>Practical projects for your portfolio</li>
<li>Sertifikat penyelesaian kursus</li>
<li>Lifetime access with no time limit</li>
<li>Regular material updates</li>
</ul>
</div>
<!-- Step Indicator -->
<div class="section">
<h2>Step Indicator with CSS Counter</h2>
<p>Automatic numbering using CSS counters:</p>
<ol class="step-list">
<li><strong>Create Account</strong> — Register a new account on the SkillVersitas platform.</li>
<li><strong>Choose a Course</strong> — Pick the CSS course you want to learn.</li>
<li><strong>Follow the Materials</strong> — Study the materials from basic to advanced.</li>
<li><strong>Complete Projects</strong> — Practice hands-on with real projects.</li>
<li><strong>Get a Certificate</strong> — Finish the course and receive a certificate.</li>
</ol>
</div>
<!-- Pricing Table -->
<div class="section">
<h2>Pricing Table with Lists</h2>
<p>Feature lists using list styling for pricing cards:</p>
<div class="pricing-grid">
<div class="pricing-card">
<h3>Gratis</h3>
<div class="price">b$0<span>/month</span></div>
<ul class="pricing-features">
<li>Access basic materials</li>
<li>Code examples</li>
<li>Forum diskusi</li>
<li class="disabled">Advanced material</li>
<li class="disabled">Practice project</li>
<li class="disabled">Sertifikat</li>
</ul>
<a href="#" class="btn-pricing">Choose Plan</a>
</div>
<div class="pricing-card featured">
<h3>Pro</h3>
<div class="price">b$99K<span>/month</span></div>
<ul class="pricing-features">
<li>Access all materials</li>
<li>Interactive code examples</li>
<li>Forum diskusi prioritas</li>
<li>Advanced material</li>
<li>Practice project</li>
<li>Sertifikat</li>
</ul>
<a href="#" class="btn-pricing">Choose Plan</a>
</div>
<div class="pricing-card">
<h3>Tim</h3>
<div class="price">b$299K<span>/month</span></div>
<ul class="pricing-features">
<li>All Pro features</li>
<li>Dashboard tim</li>
<li>Analytics</li>
<li>Priority support</li>
<li>Custom curriculum</li>
<li>Dedicated account manager</li>
</ul>
<a href="#" class="btn-pricing">Choose Plan</a>
</div>
</div>
</div>
<!-- Checklist -->
<div class="section">
<h2>Checklist</h2>
<p>Task list with checked status:</p>
<ul class="checklist">
<li class="checked">Pelajari CSS Box Model</li>
<li class="checked">Praktik CSS Border & Margin</li>
<li class="checked">Build a layout with Flexbox</li>
<li>Pelajari CSS Grid</li>
<li>Build responsive project</li>
<li>Complete the portfolio</li>
</ul>
</div>
<!-- Breadcrumbs -->
<div class="section">
<h2>Breadcrumbs</h2>
<p>Horizontal list for breadcrumb navigation:</p>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">CSS</a></li>
<li>Lists</li>
</ul>
</div>
</body>
</html>
Code Explanation
- Bullet Types — A grid of 10 boxes showing the various list-style-type options:
disc— Solid round bullet (●) — default for<ul>circle— Hollow circle bullet (○)square— Square bullet (■)none— No markerdecimal— Regular numbers: 1, 2, 3decimal-leading-zero— Numbers with a leading zero: 01, 02, 03lower-alpha/upper-alpha— Letters a/b/c or A/B/C-
lower-roman/upper-roman— Roman i/ii/iii or I/II/III -
List Position — A comparison of
outside(marker outside the content) andinside(marker inside the content).outsideis more commonly used. -
Nested Lists — Nested lists with different styling: the parent uses
list-style: none, children use the default bullet. -
Feature List — Custom markers using the
::beforepseudo-element with a green ✓ character. -
Step Indicator — Uses CSS counters (
counter-reset,counter-increment,content: counter()) to automatically create a round number for each step. -
Pricing Table — A feature list with ✓ (enabled) and ✕ (disabled) using pseudo-elements.
-
Checklist — A task list with custom checkboxes using
::before— ☐ for not completed and ☑ for completed. -
Breadcrumbs — A horizontal list with a
/separator using the::afterpseudo-element.
Everyday Use Cases
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
/* === Sidebar Navigation === */
.sidebar {
width: 260px;
background-color: #2c3e50;
color: white;
min-height: 100vh;
padding: 20px 0;
}
.sidebar h2 {
padding: 0 20px 15px;
font-size: 18px;
border-bottom: 1px solid #34495e;
}
.nav-section {
margin-top: 15px;
}
.nav-section-title {
padding: 8px 20px;
font-size: 11px;
text-transform: uppercase;
color: #7f8c8d;
letter-spacing: 1px;
}
.nav-menu {
list-style: none;
}
.nav-menu li a {
display: block;
padding: 10px 20px 10px 30px;
color: #bdc3c7;
text-decoration: none;
font-size: 14px;
transition: all 0.2s;
}
.nav-menu li a:hover,
.nav-menu li a.active {
background-color: #34495e;
color: white;
border-left: 3px solid #3498db;
padding-left: 27px;
}
.nav-submenu {
list-style: none;
}
.nav-submenu li a {
padding-left: 45px;
font-size: 13px;
}
/* === Article with Ordered List === */
.article-section {
max-width: 700px;
margin: 30px auto;
padding: 0 20px;
}
.article-card {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.article-card h2 {
font-size: 24px;
margin-bottom: 15px;
color: #2c3e50;
}
.article-card p {
line-height: 1.8;
color: #555;
margin-bottom: 16px;
}
.article-card h3 {
font-size: 18px;
margin: 20px 0 10px;
color: #2c3e50;
}
.article-card ol {
padding-left: 20px;
margin-bottom: 16px;
}
.article-card ol li {
padding: 6px 0;
line-height: 1.6;
color: #555;
font-size: 15px;
}
.article-card ol li strong {
color: #2c3e50;
}
.article-card ul {
list-style: square;
padding-left: 25px;
margin-bottom: 16px;
}
.article-card ul li {
padding: 4px 0;
line-height: 1.6;
color: #555;
font-size: 15px;
}
/* === FAQ Accordion === */
.faq-section {
max-width: 700px;
margin: 30px auto;
padding: 0 20px;
}
.faq-list {
list-style: none;
padding: 0;
}
.faq-item {
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.faq-question {
padding: 16px 20px;
font-weight: bold;
font-size: 15px;
color: #2c3e50;
cursor: pointer;
position: relative;
padding-right: 40px;
}
.faq-question::after {
content: '+';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: #3498db;
font-weight: bold;
}
.faq-answer {
padding: 0 20px 16px;
font-size: 14px;
color: #666;
line-height: 1.6;
}
/* === Task Board === */
.task-board {
display: flex;
gap: 20px;
max-width: 900px;
margin: 30px auto;
padding: 0 20px;
flex-wrap: wrap;
}
.task-column {
flex: 1;
min-width: 240px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.task-column-header {
padding: 14px 16px;
font-weight: bold;
font-size: 14px;
color: white;
}
.task-column-header.todo { background-color: #3498db; }
.task-column-header.progress { background-color: #f39c12; }
.task-column-header.done { background-color: #2ecc71; }
.task-list {
list-style: none;
padding: 10px;
}
.task-list li {
padding: 12px;
background-color: #f8f9fa;
border-radius: 6px;
margin-bottom: 8px;
font-size: 13px;
color: #555;
border-left: 3px solid transparent;
}
.task-list li.priority-high { border-left-color: #e74c3c; }
.task-list li.priority-medium { border-left-color: #f39c12; }
.task-list li.priority-low { border-left-color: #2ecc71; }
.task-list li .task-tag {
display: inline-block;
padding: 2px 8px;
background-color: #ecf0f1;
border-radius: 3px;
font-size: 11px;
color: #666;
margin-top: 6px;
}
</style>
</head>
<body>
<!-- Sidebar Navigation -->
<div style="display: flex;">
<aside class="sidebar">
<h2>SkillVersitas</h2>
<div class="nav-section">
<div class="nav-section-title">Dasar</div>
<ul class="nav-menu">
<li><a href="#" class="active">CSS Introduction</a></li>
<li><a href="#">Selectors</a></li>
<li><a href="#">Box Model</a></li>
<li><a href="#">Typography</a></li>
</ul>
</div>
<div class="nav-section">
<div class="nav-section-title">Layout</div>
<ul class="nav-menu">
<li><a href="#">Display</a></li>
<li><a href="#">Position</a></li>
<li><a href="#">Float & Clear</a></li>
<li><a href="#">Flexbox</a>
<ul class="nav-submenu">
<li><a href="#">Container</a></li>
<li><a href="#">Items</a></li>
<li><a href="#">Alignment</a></li>
</ul>
</li>
<li><a href="#">CSS Grid</a></li>
</ul>
</div>
<div class="nav-section">
<div class="nav-section-title">Advanced</div>
<ul class="nav-menu">
<li><a href="#">Animation</a></li>
<li><a href="#">Responsive</a></li>
<li><a href="#">Variables</a></li>
</ul>
</div>
</aside>
</div>
<!-- Article -->
<div class="article-section">
<div class="article-card">
<h2>Complete CSS Lists Guide</h2>
<p>HTML provides two main types of lists: unordered lists (<ul>) and ordered lists (<ol>). CSS lets you control the appearance of these lists in detail.</p>
<h3>List Types in HTML</h3>
<ol>
<li><strong>Unordered List (<ul>)</strong> — List with bullet markers (disc, circle, square). Used when item order does not matter.</li>
<li><strong>Ordered List (<ol>)</strong> — List with numbering (numbers, letters, Roman). Used when item order matters.</li>
<li><strong>Description List (<dl>)</strong> — Definition list with terms (<dt>) and descriptions (<dd>). Used for glossaries or FAQs.</li>
</ol>
<h3>CSS Properties for Lists</h3>
<ul>
<li><strong>list-style-type</strong> — Determines the marker type (disc, circle, decimal, etc.)</li>
<li><strong>list-style-position</strong> — Determines the marker position (outside or inside)</li>
<li><strong>list-style-image</strong> — Uses an image as the marker</li>
<li><strong>list-style</strong> — Shorthand for all list properties</li>
</ul>
<h3>When to Use Lists?</h3>
<ul>
<li>Navigation menus and breadcrumbs</li>
<li>Step-by-step lists (tutorials)</li>
<li>FAQs and product features</li>
<li>Pricing tables and comparisons</li>
<li>Sidebar categories</li>
</ul>
</div>
</div>
<!-- FAQ -->
<div class="faq-section">
<h2 style="margin-bottom: 15px; color: #2c3e50;">FAQ</h2>
<ul class="faq-list">
<li class="faq-item">
<div class="faq-question">What is the CSS Box Model?</div>
<div class="faq-answer">The CSS Box Model is a layout system that describes a rectangular box for each HTML element. Every element consists of content, padding, border, and margin.</div>
</li>
<li class="faq-item">
<div class="faq-question">How do you create a responsive layout?</div>
<div class="faq-answer">Use Flexbox or CSS Grid with relative units such as %, em, rem, or vw/vh. Add media queries for different breakpoints.</div>
</li>
<li class="faq-item">
<div class="faq-question">What is the difference between Flexbox and Grid?</div>
<div class="faq-answer">Flexbox is designed for one-dimensional layouts (rows OR columns), while CSS Grid is for two-dimensional layouts (rows AND columns at the same time).</div>
</li>
</ul>
</div>
<!-- Task Board -->
<div class="task-board">
<div class="task-column">
<div class="task-column-header todo">To Do (3)</div>
<ul class="task-list">
<li class="priority-high">
Learn CSS Grid
<div><span class="task-tag">Learning</span></div>
</li>
<li class="priority-medium">
Build a portfolio website
<div><span class="task-tag">Project</span></div>
</li>
<li class="priority-low">
Read the Flexbox documentation
<div><span class="task-tag">Research</span></div>
</li>
</ul>
</div>
<div class="task-column">
<div class="task-column-header progress">In Progress (2)</div>
<ul class="task-list">
<li class="priority-high">
Complete the CSS tutorial
<div><span class="task-tag">Learning</span></div>
</li>
<li class="priority-medium">
Build a responsive navbar
<div><span class="task-tag">Project</span></div>
</li>
</ul>
</div>
<div class="task-column">
<div class="task-column-header done">Done (2)</div>
<ul class="task-list">
<li>
Learn the CSS Box Model
<div><span class="task-tag">Learning</span></div>
</li>
<li>
Setup development environment
<div><span class="task-tag">Setup</span></div>
</li>
</ul>
</div>
</div>
</body>
</html>
In the example above:
- Sidebar Navigation — A list without markers (list-style: none) with nested submenus and hover effects
- Article — An ordered list (<ol>) for steps and an unordered list (<ul>) for feature lists
- FAQ — A list formatted as an accordion with a custom marker (+)
- Task Board — List cards with priority color coding using border-left
Custom Counter (Advanced)
CSS Counters are very powerful for automatic numbering:
/* Reset the counter on the parent */
.article { counter-reset: myCounter; }
/* Increment the counter on each item */
.article p { counter-increment: myCounter; }
/* Display the counter */
.article p::before {
content: counter(myCounter) '. ';
font-weight: bold;
}
Counters support different formats:
- counter(myCounter) — Numbers: 1, 2, 3, ...
- counter(myCounter, lower-alpha) — Letters: a, b, c, ...
- counter(myCounter, upper-roman) — Roman: I, II, III, ...
- counter(myCounter, decimal-leading-zero) — Numbers with leading zeros: 01, 02, 03, ...
Conclusion
list-style-type— Controls the marker type:disc,circle,square,none,decimal,lower-alpha,upper-roman, etc.list-style-position—outside(default) puts the marker outside the content,insideputs it inside the content.list-style-image— Uses a custom image as a marker.list-style— Shorthand:list-style: disc inside url('bullet.png');- CSS Counters — For custom numbering:
counter-reset,counter-increment,content: counter(). list-style: none— Very commonly used for navigation menus and custom styled lists.- The
::beforepseudo-element — Enables custom markers such as ✓, ☑, round numbers, etc. - Lists are the foundation of navigation, FAQ, pricing tables, breadcrumbs, and many other UI components.