16. CSS Lists

What you will learn

How to change bullets and numbers
How to remove list markers
How to turn a list into a horizontal menu

List style type

list-style-type changes the marker. Common values are disc, circle, square, decimal, lower-alpha, upper-roman, and none.

Example

<style>
  .sq { list-style-type: square; }
  .rom { list-style-type: upper-roman; }
</style>

<ul class="sq">
  <li>Square marker</li>
  <li>Another item</li>
</ul>

<ol class="rom">
  <li>Roman numeral</li>
  <li>Another item</li>
</ol>

Output

Square marker
Another item

Roman numeral
Another item

Marker position

list-style-position is outside by default, so the marker hangs to the left of the text. With inside, the marker sits inside the text block and wrapped lines go under it.

Example

<style>
  .out { list-style-position: outside; width: 200px; }
  .in { list-style-position: inside; width: 200px; }
</style>

<ul class="out"><li>Outside: wrapped lines line up with the first word.</li></ul>
<ul class="in"><li>Inside: wrapped lines go under the bullet.</li></ul>

Output

Outside: wrapped lines line up with the first word.

Inside: wrapped lines go under the bullet.

Custom markers

The ::marker pseudo-element styles the bullet or number itself.

Example

<style>
  li::marker {
    color: #0d6efd;
    font-weight: bold;
  }
</style>

<ul>
  <li>Blue bullet</li>
  <li>Another blue bullet</li>
</ul>

Output

Blue bullet (the bullet turns blue in the live editor)
Another blue bullet

You can also use a picture as a marker with list-style-image: url("star.png"), but ::marker and a text symbol are simpler and more flexible.

Removing markers

Navigation menus are built from lists, but without bullets. Remove them with list-style: none, and remove the default left padding and margin as well.

Example

<style>
  ul.plain {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  ul.plain li {
    padding: 8px 0;
    border-bottom: 1px solid #cfe6ff;
  }
</style>

<ul class="plain">
  <li>Home</li>
  <li>Tutorials</li>
  <li>Contact</li>
</ul>

Output

Home
Tutorials
Contact

Some screen readers stop announcing an element as a list when list-style: none is used. If the list structure matters, add role="list" to the <ul>.

A horizontal menu

Place the items on one line with display: flex. You will learn Flexbox fully in a later lesson, but this pattern is so common that it is worth seeing now.

Example

<style>
  .menu {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #082b59;
  }
  .menu a {
    display: block;
    padding: 12px 18px;
    color: white;
    text-decoration: none;
  }
  .menu a:hover { background-color: #0d6efd; }
</style>

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Tutorials</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Output

The shorthand

Syntax

ul {
  list-style: square inside;
}

Common mistakes

Removing bullets but forgetting the default left padding, so the list stays indented.
Putting text or other tags directly inside <ul> instead of inside <li>.
Making menu links too small to tap on a phone. Give them generous padding.
Using a list for layout when no list is intended.

Exercise

Turn .tags into a row of items with no bullets. Show each item with a light blue background (#eaf5ff), 6px by 14px padding, and rounded corners of 20px, with an 8px gap.

Show solution

<style>
  .tags {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .tags li {
    background-color: #eaf5ff;
    padding: 6px 14px;
    border-radius: 20px;
  }
</style>
<ul class="tags">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Knowledge check

1. Which property removes the bullets from a list?

list-style: none (or list-style-type: none).

2. Which pseudo-element styles the bullet or number itself?

::marker

3. Which display value puts list items side by side in a modern menu?

display: flex on the list.

Summary

Change markers with list-style-type and style them with ::marker.
Menus are lists with the markers, margin, and padding removed.
display: flex turns a list into a horizontal row.