← Back to Chapters

CSS Lists

? CSS Lists

⚡ Quick Overview

In CSS, the list-style-type property controls the marker (bullet or numbering style) used for lists. You can:

  • Change bullet styles in unordered lists (<ul>).
  • Change numbering styles in ordered lists (<ol>).
  • Remove markers completely when you want custom designs.

Lists are perfect for navigation menus, feature lists, steps in a process, and more.

? Key Concepts

  • list-style-type defines the marker style (disc, circle, square, decimal, roman, etc.).
  • Unordered lists (<ul>) use bullets; ordered lists (<ol>) use numbers/letters.
  • You can combine HTML structure (ul/ol + li) with CSS to fully control appearance.
  • Setting list-style-type: none; is common for custom menus and navigation bars.

? Syntax / Theory

Basic syntax of the list-style-type property:

? View Code Example 
// General syntax for list-style-type
selector {
  list-style-type: value;
}

Common values for unordered lists:

  • disc – default filled circle.
  • circle – hollow circle.
  • square – filled square.
  • none – removes the bullet.

Common values for ordered lists:

  • decimal – 1, 2, 3, ...
  • lower-alpha – a, b, c, ...
  • upper-alpha – A, B, C, ...
  • lower-roman – i, ii, iii, ...
  • upper-roman – I, II, III, ...

? Code Examples

1️⃣ Unordered List with Custom Bullets

This example uses a square bullet for an unordered list:

? View Code Example 
// Use square bullets for unordered list
ul.custom-bullets {
  list-style-type: square;
}

<ul class="custom-bullets">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

2️⃣ Ordered List with Decimal Numbers

This example uses standard decimal numbers for an ordered list:

? View Code Example 
// Use decimal numbers for ordered list
ol.steps {
  list-style-type: decimal;
}

<ol class="steps">
  <li>Plan the layout</li>
  <li>Write the HTML</li>
  <li>Add CSS styling</li>
</ol>

3️⃣ Removing List Markers

Often used for navigation menus or custom icons:

? View Code Example 
// Remove bullets to create a clean nav list
ul.nav-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

<ul class="nav-list">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

?️ Live Output / Explanation

Unordered List (Default Disc):

  • Item 1
  • Item 2
  • Item 3

Ordered List (Decimal):

  1. First item
  2. Second item
  3. Third item

In a browser, changing list-style-type in CSS will instantly change how these markers look, without changing the HTML structure.

? Types of Lists & Use Cases

Here are two main list types you will use in web pages:

Type Example Values Use Case
Unordered List (<ul>) disc, circle, square Features list, bullet points, navigation items.
Ordered List (<ol>) decimal, lower-alpha, upper-roman Steps in a process, rankings, instructions.

? Tips & Best Practices

  • Use list-style-type to match the tone of your content (formal lists can use roman numerals).
  • For navigation menus, set list-style-type: none; and use custom icons or flexbox layout.
  • Adjust padding and margin on ul/ol for clean alignment.
  • Keep list items short and scannable so users can quickly understand the content.

? Try It Yourself

  1. Create one unordered list and one ordered list with at least 3 items each.
  2. Apply list-style-type with different values like circle, square, and upper-roman.
  3. Remove bullets from a list using list-style-type: none; and style the items as a horizontal navigation bar.
  4. Experiment with padding and margin to see how the list position changes on the page.