CSS3 Mastery — Chapter 8: CSS Lists, Tables & Image Sprites — CSS3 Mastery Guide

Chapter 8: CSS Lists, Tables & Image Sprites

Lists, tables, and graphic asset management form the backbone of structured content presentation. Mastering list markers, CSS counter variables, responsive table layouts, and legacy image sprite performance techniques ensures clean data representation and optimized asset delivery.

8.1 List Styling: list-style-type & list-style-image

The list-style property controls the marker type, position, and icon image for ordered (<ol>) and unordered (<ul>) lists.

Property	Common Values	Visual Effect & Description
`list-style-type`	`disc`, `circle`, `square`, `decimal`, `lower-alpha`, `none`	Controls the bullet icon shape or numeric bullet sequence.
`list-style-position`	`outside` (default), `inside`	Determines if bullet markers sit outside the text block box or indent inside the content box.
`list-style-image`	`url('bullet.png')`	Replaces standard markers with a custom raster or vector image icon.

<!DOCTYPE html>
<html>
<head>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; background: #0f172a; color: #f8fafc; padding: 24px; margin: 0; }
    h3 { margin-top: 0; color: #818cf8; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .list-box { background: #1e293b; border-radius: 10px; padding: 16px 20px; flex: 1; min-width: 180px; }
    .list-label { font-size: 11px; color: #64748b; font-family: monospace; display: block; margin-bottom: 8px; }

    /* 1. disc (default unordered) */
    .ul-disc   { list-style-type: disc;       color: #94a3b8; padding-left: 20px; }
    /* 2. circle */
    .ul-circle { list-style-type: circle;     color: #94a3b8; padding-left: 20px; }
    /* 3. square */
    .ul-square { list-style-type: square;     color: #94a3b8; padding-left: 20px; }
    /* 4. decimal ordered */
    .ol-decimal { list-style-type: decimal;    color: #94a3b8; padding-left: 20px; }
    /* 5. lower-alpha */
    .ol-alpha   { list-style-type: lower-alpha; color: #94a3b8; padding-left: 20px; }

    /* 6. Custom checklist — list-style: none + ::before */
    ul.checklist { list-style: none; padding-left: 0; }
    ul.checklist li { position: relative; padding-left: 28px; margin-bottom: 6px; color: #94a3b8; }
    ul.checklist li::before { content: "✔"; position: absolute; left: 0; color: #10b981; font-weight: bold; }
  </style>
</head>
<body>
  <h3>List Styling — list-style-type Comparison</h3>
  <div class="grid">
    <div class="list-box">
      <span class="list-label">list-style-type: disc</span>
      <ul class="ul-disc"><li>Alpha</li><li>Beta</li><li>Gamma</li></ul>
    </div>
    <div class="list-box">
      <span class="list-label">list-style-type: circle</span>
      <ul class="ul-circle"><li>Alpha</li><li>Beta</li><li>Gamma</li></ul>
    </div>
    <div class="list-box">
      <span class="list-label">list-style-type: square</span>
      <ul class="ul-square"><li>Alpha</li><li>Beta</li><li>Gamma</li></ul>
    </div>
    <div class="list-box">
      <span class="list-label">list-style-type: decimal</span>
      <ol class="ol-decimal"><li>First</li><li>Second</li><li>Third</li></ol>
    </div>
    <div class="list-box">
      <span class="list-label">list-style-type: lower-alpha</span>
      <ol class="ol-alpha"><li>First</li><li>Second</li><li>Third</li></ol>
    </div>
    <div class="list-box">
      <span class="list-label">Custom: list-style:none + ::before "✔"</span>
      <ul class="checklist">
        <li>HTML Mastery</li>
        <li>CSS Selectors</li>
        <li>Flexbox Layout</li>
      </ul>
    </div>
  </div>
</body>
</html>

8.2 Custom List Counters (counter-reset & counter-increment)

CSS Counters are CSS variables maintained by the browser engine to dynamically count items (chapters, section headings, multi-nested lists) without modifying HTML markup.

CSS Counter Lifecycle: Reset → Increment → Display

counter-reset: counterName; — Initializes the counter variable to 0 on a parent container element.
counter-increment: counterName; — Adds 1 to the counter variable on every child element.
content: counter(counterName); — Renders the numerical value inside a ::before pseudo-element.

<!DOCTYPE html>
<html>
<head>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; background: #0f172a; color: #f8fafc; padding: 24px; margin: 0; }
    h3 { margin-top: 0; color: #38bdf8; }

    /* Step-by-step process flow using CSS counters */
    .process-list {
      counter-reset: step-counter; /* Step 1: Initialize counter */
      list-style: none;
      padding: 0;
    }

    .process-list li {
      counter-increment: step-counter; /* Step 2: Increment per item */
      position: relative;
      padding-left: 52px;
      margin-bottom: 16px;
      line-height: 1.5;
      min-height: 36px;
      color: #cbd5e1;
    }

    .process-list li::before {
      content: counter(step-counter); /* Step 3: Render counter */
      position: absolute;
      left: 0; top: 0;
      width: 36px; height: 36px;
      background: linear-gradient(135deg, #4f46e5, #06b6d4);
      color: #ffffff;
      border-radius: 50%;
      text-align: center;
      line-height: 36px;
      font-weight: bold;
      font-size: 15px;
    }

    /* Section heading auto-numbering */
    .auto-sections { counter-reset: section-num; list-style: none; padding: 0; margin-top: 20px; }
    .auto-sections li { counter-increment: section-num; padding: 10px 16px; margin-bottom: 8px; background: #1e293b; border-radius: 8px; color: #94a3b8; }
    .auto-sections li::before {
      content: "§ " counter(section-num) " — ";
      color: #f59e0b; font-weight: 700;
    }
  </style>
</head>
<body>
  <h3>CSS Counters — counter-reset + counter-increment</h3>

  <p style="font-size:13px;color:#94a3b8;">Numbered step bubbles — no HTML numbers needed!</p>
  <ol class="process-list">
    <li>Plan your layout architecture and component hierarchy</li>
    <li>Build semantic HTML markup with proper heading structure</li>
    <li>Apply CSS box model, spacing, and typography rules</li>
    <li>Add responsive breakpoints with Flexbox or Grid</li>
    <li>Polish with micro-animations and transitions</li>
  </ol>

  <p style="font-size:13px;color:#94a3b8;">Auto-numbered sections using §-prefix counter:</p>
  <ul class="auto-sections">
    <li>Introduction to CSS Selectors</li>
    <li>The Box Model Explained</li>
    <li>Flexbox Layout System</li>
  </ul>
</body>
</html>

8.3 Styling HTML Tables & Responsive Layout Wrappers

Unstyled HTML tables render with default browser spacing and double borders. CSS transforms raw table elements into sleek, readable data grids.

Table Property	Recommended CSS Rule	Description
`border-collapse`	`border-collapse: collapse;`	Merges adjacent cell borders into a single clean border (removes double border gaps).
`th, td padding`	`padding: 12px 16px;`	Provides touch-friendly spacing between text data and cell boundaries.
`nth-child zebra striping`	`tr:nth-child(even) { background: #1e293b; }`	Alternates row background colors for easy horizontal line scanning.

Responsive Table Wrapper Pattern

Tables naturally resist scaling down on mobile screens. Always wrap tables in a container element with overflow-x: auto to enable horizontal scrolling on small viewports without breaking page width!

<!DOCTYPE html>
<html>
<head>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; background: #0f172a; color: #f8fafc; padding: 24px; margin: 0; }
    h3 { margin-top: 0; color: #f59e0b; }

    /* Responsive wrapper — horizontal scroll on mobile */
    .table-responsive-wrapper {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 10px;
      border: 1px solid #334155;
    }

    /* Styled dark data table */
    table.data-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 500px; /* Force scroll on small screens */
    }
    table.data-table th {
      background: #1e293b;
      color: #38bdf8;
      padding: 12px 16px;
      text-align: left;
      font-size: 13px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      border-bottom: 2px solid #334155;
    }
    table.data-table td {
      padding: 11px 16px;
      border-bottom: 1px solid #1e293b;
      font-size: 14px;
      color: #cbd5e1;
    }
    /* Zebra striping — nth-child(even) */
    table.data-table tbody tr:nth-child(even) { background: rgba(30,41,59,0.6); }
    /* Hover row highlight */
    table.data-table tbody tr:hover { background: rgba(99,102,241,0.1); cursor: default; }

    .status-badge {
      display: inline-block; padding: 2px 10px; border-radius: 9999px;
      font-size: 11px; font-weight: 700;
    }
    .status-done     { background: rgba(16,185,129,0.2); color: #34d399; }
    .status-progress { background: rgba(245,158,11,0.2); color: #fbbf24; }
    .status-pending  { background: rgba(239,68,68,0.2);  color: #f87171; }
  </style>
</head>
<body>
  <h3>Responsive Table with Zebra Striping &amp; Hover</h3>
  <!-- Wrapper provides horizontal scroll on small viewports -->
  <div class="table-responsive-wrapper">
    <table class="data-table">
      <thead>
        <tr>
          <th>Module</th>
          <th>Topic</th>
          <th>Status</th>
          <th>Completion</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Chapter 1</td><td>CSS Introduction &amp; Setup</td>
          <td><span class="status-badge status-done">Completed</span></td>
          <td>100%</td>
        </tr>
        <tr>
          <td>Chapter 2</td><td>Selectors &amp; Specificity</td>
          <td><span class="status-badge status-done">Completed</span></td>
          <td>100%</td>
        </tr>
        <tr>
          <td>Chapter 3</td><td>Colors, Units &amp; Math</td>
          <td><span class="status-badge status-progress">In Progress</span></td>
          <td>70%</td>
        </tr>
        <tr>
          <td>Chapter 4</td><td>Backgrounds &amp; Borders</td>
          <td><span class="status-badge status-pending">Pending</span></td>
          <td>0%</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

8.4 Performance Optimization: CSS Image Sprites

An Image Sprite is a single image file combining multiple small graphics, icons, or logo variations. Using a sprite reduces HTTP request count, speeding up website loading times.

Image Sprite Technique Breakdown

By setting an element's fixed width and height, you use negative background-position offsets to display specific sub-regions of the master sprite sheet. Below we simulate the same technique using CSS gradient backgrounds as colour swatches (in real production, replace with url('icons-sprite.png')):

<!DOCTYPE html>
<html>
<head>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; background: #0f172a; color: #f8fafc; padding: 24px; margin: 0; }
    h3 { margin-top: 0; color: #6366f1; }

    /* In production: one sprite sheet URL, different background-position per icon */
    /* Here we simulate with solid colour blocks to show the positioning concept */
    .sprite-icon {
      width: 48px; height: 48px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 8px; font-size: 20px;
      /* background-image: url('icons-sprite.png'); */
      /* background-repeat: no-repeat; */
    }

    /* Simulated sprite coordinates (use background-position in production) */
    .icon-home  { background: rgba(99,102,241,0.25); border: 1px solid #6366f1; } /* position: 0px 0px */
    .icon-user  { background: rgba(16,185,129,0.25); border: 1px solid #10b981; } /* position: -48px 0 */
    .icon-cart  { background: rgba(245,158,11,0.25); border: 1px solid #f59e0b; } /* position: -96px 0 */
    .icon-bell  { background: rgba(239,68,68,0.25);  border: 1px solid #ef4444; } /* position: -144px 0 */
    .icon-star  { background: rgba(56,189,248,0.25); border: 1px solid #38bdf8; } /* position: -192px 0 */

    .sprite-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
    .sprite-item { text-align: center; }
    .sprite-item span { font-size: 10px; color: #64748b; display: block; margin-top: 4px; font-family: monospace; }

    .code-note {
      background: #1e293b; border-radius: 8px; padding: 12px 16px; margin-top: 16px;
      font-size: 12px; font-family: monospace; color: #94a3b8;
      border-left: 3px solid #6366f1;
    }
  </style>
</head>
<body>
  <h3>CSS Image Sprite Concept</h3>
  <p style="font-size:13px;color:#94a3b8;">One sprite sheet, five icons, zero extra HTTP requests:</p>
  <div class="sprite-row">
    <div class="sprite-item"><div class="sprite-icon icon-home">🏠</div><span>pos: 0px 0</span></div>
    <div class="sprite-item"><div class="sprite-icon icon-user">👤</div><span>pos: -48px 0</span></div>
    <div class="sprite-item"><div class="sprite-icon icon-cart">🛒</div><span>pos: -96px 0</span></div>
    <div class="sprite-item"><div class="sprite-icon icon-bell">🔔</div><span>pos: -144px 0</span></div>
    <div class="sprite-item"><div class="sprite-icon icon-star">⭐</div><span>pos: -192px 0</span></div>
  </div>
  <div class="code-note">
    .sprite-icon { width:48px; height:48px; background-image: url('sprite.png'); background-repeat: no-repeat; }<br/>
    .icon-home { background-position: 0 0; }<br/>
    .icon-user { background-position: -48px 0; }<br/>
    .icon-cart { background-position: -96px 0; }
  </div>
</body>
</html>

8.5 Interactive Sandbox — Lists, Tables & Counters

Experiment live with custom list counters, zebra-striped tables, and checklist markers in the interactive code playground below:

Live Playground — Chapter 8 Sandbox

<!DOCTYPE html>
<html>
<head>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: system-ui, sans-serif;
      background: #0f172a;
      color: #f8fafc;
      padding: 24px;
      margin: 0;
    }
    h3 { color: #818cf8; margin-top: 0; }
    .section-label { font-size: 11px; color: #64748b; font-family: monospace; margin: 18px 0 6px; }

    /* 1. Custom Checklist — list-style: none + ::before emoji */
    ul.checklist { list-style: none; padding: 0; }
    ul.checklist li { position: relative; padding-left: 28px; margin-bottom: 8px; color: #94a3b8; }
    ul.checklist li::before { content: "✔"; position: absolute; left: 0; color: #10b981; font-weight: bold; }

    /* 2. CSS Counter Step Flow */
    .step-flow { counter-reset: step-id; list-style: none; padding: 0; }
    .step-flow li {
      counter-increment: step-id;
      position: relative; padding-left: 44px;
      margin-bottom: 14px; line-height: 32px; color: #cbd5e1;
    }
    .step-flow li::before {
      content: counter(step-id);
      position: absolute; left: 0; top: 0;
      width: 32px; height: 32px;
      background: linear-gradient(135deg, #4f46e5, #06b6d4);
      color: #fff; border-radius: 50%;
      text-align: center; line-height: 32px; font-weight: bold;
    }

    /* 3. Data Table with zebra striping + hover */
    .table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid #334155; margin-top: 6px; }
    table.data-table { width: 100%; border-collapse: collapse; min-width: 400px; }
    table.data-table th { background: #1e293b; color: #38bdf8; padding: 10px 14px; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #334155; }
    table.data-table td { padding: 10px 14px; border-bottom: 1px solid #1e293b; font-size: 13px; color: #cbd5e1; }
    table.data-table tbody tr:nth-child(even) { background: rgba(30,41,59,0.6); }
    table.data-table tbody tr:hover { background: rgba(99,102,241,0.12); }
  </style>
</head>
<body>
  <h3>CSS Lists, Counters &amp; Tables Demo</h3>

  <div class="section-label">Custom Checklist — list-style:none + ::before "✔"</div>
  <ul class="checklist">
    <li>Learn CSS Selectors &amp; Specificity</li>
    <li>Master the Box Model</li>
    <li>Build Flexbox Layouts</li>
  </ul>

  <div class="section-label">CSS Counter Step Flow — counter-reset + counter-increment</div>
  <ol class="step-flow">
    <li>Planning Architecture &amp; Component Hierarchy</li>
    <li>Building Semantic HTML Markup</li>
    <li>Styling Layout with Modern CSS3</li>
  </ol>

  <div class="section-label">Data Table — border-collapse + zebra striping + hover</div>
  <div class="table-wrap">
    <table class="data-table">
      <thead><tr><th>Phase</th><th>Topic</th><th>Status</th><th>%</th></tr></thead>
      <tbody>
        <tr><td>Ch 1</td><td>HTML Foundations</td><td>✅ Done</td><td>100%</td></tr>
        <tr><td>Ch 2</td><td>CSS Selectors</td><td>🔄 In Progress</td><td>80%</td></tr>
        <tr><td>Ch 3</td><td>Flexbox Layout</td><td>⏳ Pending</td><td>0%</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>