Skillversitas

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

  1. Bullet Types — A grid of 10 boxes showing the various list-style-type options:
  2. disc — Solid round bullet (●) — default for <ul>
  3. circle — Hollow circle bullet (○)
  4. square — Square bullet (■)
  5. none — No marker
  6. decimal — Regular numbers: 1, 2, 3
  7. decimal-leading-zero — Numbers with a leading zero: 01, 02, 03
  8. lower-alpha / upper-alpha — Letters a/b/c or A/B/C
  9. lower-roman / upper-roman — Roman i/ii/iii or I/II/III

  10. List Position — A comparison of outside (marker outside the content) and inside (marker inside the content). outside is more commonly used.

  11. Nested Lists — Nested lists with different styling: the parent uses list-style: none, children use the default bullet.

  12. Feature List — Custom markers using the ::before pseudo-element with a green ✓ character.

  13. Step Indicator — Uses CSS counters (counter-reset, counter-increment, content: counter()) to automatically create a round number for each step.

  14. Pricing Table — A feature list with ✓ (enabled) and ✕ (disabled) using pseudo-elements.

  15. Checklist — A task list with custom checkboxes using ::before — ☐ for not completed and ☑ for completed.

  16. Breadcrumbs — A horizontal list with a / separator using the ::after pseudo-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 (&lt;ul&gt;) and ordered lists (&lt;ol&gt;). CSS lets you control the appearance of these lists in detail.</p>

      <h3>List Types in HTML</h3>
      <ol>
        <li><strong>Unordered List (&lt;ul&gt;)</strong> — List with bullet markers (disc, circle, square). Used when item order does not matter.</li>
        <li><strong>Ordered List (&lt;ol&gt;)</strong> — List with numbering (numbers, letters, Roman). Used when item order matters.</li>
        <li><strong>Description List (&lt;dl&gt;)</strong> — Definition list with terms (&lt;dt&gt;) and descriptions (&lt;dd&gt;). 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, inside puts 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 ::before pseudo-element — Enables custom markers such as ✓, ☑, round numbers, etc.
  • Lists are the foundation of navigation, FAQ, pricing tables, breadcrumbs, and many other UI components.