CSS Lists Tutorial, Style HTML Ordered & Unordered Lists with Examples

Lists in CSS

In web design, lists are essential for organizing content. HTML provides two main types of lists: ordered ( <ol> ) and unordered ( <ul> ). With CSS, you can style and customize these lists to match your website's design and improve readability.

HTML Lists Overview

Ordered List ( <ol> )

Ordered lists display items in a numbered sequence - ideal for steps or rankings.

Example:

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

Output:

Unordered List ( <ul> )

Unordered lists use bullets to present items where the order does not matter.

Example:

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Output:

CSS List Properties

CSS gives you complete control over list styling, including bullets, numbers, spacing and even using images as bullets.

1. list-style-type

changes the marker type (bullets or numbers):


ul {
  list-style-type: disc;
  /* default for <ul> */
}

ol {
  list-style-type: decimal;
  /* default for <ol> */
}

Other values:

circle

square

lower-alpha

upper-roman

2. list-style-position

Sets the marker inside or outside the content box.

ul {
  list-style-position: inside;
}

ol {
  list-style-position: outside;
  /* default */
}

3. list-style-image

Uses an image instead of a bullet or number.

ul {
  list-style-image: url('custom-bullet.png');
}

4. Custom Bullets with : :before

Use CSS : :before to create stylish custom markers:

ul {
  list-style-type: none;
}

ul li::before {
  content: "✔️";
  margin-right: 8px;
  color: green;
}

Styling List Items ( <li> )

You can also style individual list items for better spacing and layout:

li {
  margin: 10px 0;
  padding: 5px;
}

Unordered Lists Example

<!DOCTYPE html>
<html>

<head>
  <style>
    ul.circle {
      list-style-type: circle;
    }

    ul.square {
      list-style-type: square;
    }
  </style>
</head>

<body>
  <h2>Unordered List Example</h2>
  <ul class="circle">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
  <ul class="square">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
</body>

</html>

Output:

Ordered Lists Example

<!DOCTYPE html>
<html>

<head>
  <style>
    ol.decimal {
      list-style-type: decimal;
    }

    ol.alpha {
      list-style-type: lower-alpha;
    }
  </style>
</head>

<body>
  <h2>Ordered List Example</h2>
  <ol class="decimal">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ol>
  <ol class="alpha">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ol>
</body>

</html>

Output:

Tips

Use <ul> for unordered (bulleted) lists and <ol> for ordered (numbered) lists.
Customize markers using list-style-type, list-style-position, and list-style-image.
You can use pseudo-elements like ::before to create fancy custom bullets.
Add spacing with margin and padding on <li> elements for a clean layout.