What is an HTML List?

There are two main types of lists in HTML:

1. Unordered List (<ul>) · items without a specific order. Each item gets a bullet point by default.

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Expected output in browser:

• Apples
• Bananas
• Cherries

2. Ordered List (<ol>) · items with a specific order. Each item gets a number by default.

<ol>
  <li>Preheat oven to 180°C</li>
  <li>Mix the ingredients</li>
  <li>Bake for 30 minutes</li>
</ol>

Expected output in browser:

1. Preheat oven to 180°C
2. Mix the ingredients
3. Bake for 30 minutes

The <li> tag stands for "list item." Every item inside a <ul> or <ol> must be wrapped in <li> tags.

Real-world analogy: A <ul> is like a shopping list · the order doesn't matter. A <ol> is like a recipe · the order absolutely matters.

What Properties Does CSS Give Us for Lists?

CSS provides three dedicated list-styling properties:

Plus a shorthand: list-style · which sets all three in one line.

We will explore each one thoroughly.

What is list-style-type?

list-style-type is the CSS property that controls what kind of marker appears before each list item. The "marker" is the bullet dot, number, letter, or symbol at the start of each <li>.

Why does this matter? Different contexts call for different visual styles. A recipe needs numbers. A feature list needs clean bullets. A sidebar menu needs no bullets at all. CSS gives you full control over which marker is used.

Values for Unordered Lists (<ul>)

disc · Filled Circle (Default)

This is the browser's default bullet. It is a solid, filled circle.

<ul style="list-style-type: disc;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Expected output:

● HTML
● CSS
● JavaScript

circle · Hollow Circle

An outline circle · not filled, just the ring.

ul {
  list-style-type: circle;
}

<ul>
  <li>Python</li>
  <li>Java</li>
  <li>C++</li>
</ul>

Expected output:

○ Python
○ Java
○ C++

Thinking prompt: When would a hollow circle look better than a filled disc? Think about light backgrounds vs dark backgrounds.

square · Filled Square

A solid filled square. Popular in modern, structured layouts.

ul {
  list-style-type: square;
}

Expected output:

■ Item One
■ Item Two
■ Item Three

none · No Bullet at All

This completely removes the bullet marker. It is one of the most useful values because it lets you use <ul> purely as a layout container without any visual marker.

ul {
  list-style-type: none;
}

Expected output:

Item One
Item Two
Item Three

No bullet at all · just the text. This is used extensively for navigation menus, card lists, and anywhere a list structure is needed without the visual marker.

Values for Ordered Lists (<ol>)

decimal · Numbers (Default)

The default for ordered lists. 1, 2, 3, 4...

ol {
  list-style-type: decimal;
}

Expected output:

1. Step One
2. Step Two
3. Step Three

decimal-leading-zero · Numbers with Leading Zero

Good for lists that need zero-padded numbers: 01, 02, 03...

ol {
  list-style-type: decimal-leading-zero;
}

Expected output:

01. Step One
02. Step Two
03. Step Three

lower-roman · Lowercase Roman Numerals

Uses i, ii, iii, iv, v... Great for outlines, legal documents, or academic formatting.

ol {
  list-style-type: lower-roman;
}

Expected output:

i.  Chapter One
ii. Chapter Two
iii. Chapter Three

upper-roman · Uppercase Roman Numerals

Uses I, II, III, IV, V... More formal than lowercase.

ol {
  list-style-type: upper-roman;
}

Expected output:

I.   Introduction
II.  Methodology
III. Results

lower-alpha · Lowercase Letters

Uses a, b, c, d... Excellent for sub-lists or multiple choice questions.

ol {
  list-style-type: lower-alpha;
}

Expected output:

a. Option One
b. Option Two
c. Option Three

upper-alpha · Uppercase Letters

Uses A, B, C, D... Often used in formal outlines.

ol {
  list-style-type: upper-alpha;
}

Expected output:

A. First Point
B. Second Point
C. Third Point

lower-greek · Lowercase Greek Letters

Uses α, β, γ... Useful in scientific or mathematical contexts.

ol {
  list-style-type: lower-greek;
}

none · No Number Marker

Just like with <ul>, you can strip the number entirely from an ordered list:

ol {
  list-style-type: none;
}

Side-by-Side Comparison · All Major Types

Here is a complete demo showing all major types in one file:

<!DOCTYPE html>
<html>
<head>
  <style>
    .disc    { list-style-type: disc; }
    .circle  { list-style-type: circle; }
    .square  { list-style-type: square; }
    .none    { list-style-type: none; }

    .decimal { list-style-type: decimal; }
    .roman-l { list-style-type: lower-roman; }
    .roman-u { list-style-type: upper-roman; }
    .alpha-l { list-style-type: lower-alpha; }
    .alpha-u { list-style-type: upper-alpha; }
  </style>
</head>
<body>

  <h3>Unordered</h3>
  <ul class="disc">   <li>disc</li>   <li>disc</li>   </ul>
  <ul class="circle"> <li>circle</li> <li>circle</li> </ul>
  <ul class="square"> <li>square</li> <li>square</li> </ul>
  <ul class="none">   <li>none</li>   <li>none</li>   </ul>

  <h3>Ordered</h3>
  <ol class="decimal"> <li>decimal</li> <li>decimal</li> </ol>
  <ol class="roman-l"> <li>lower-roman</li> <li>lower-roman</li> </ol>
  <ol class="roman-u"> <li>upper-roman</li> <li>upper-roman</li> </ol>
  <ol class="alpha-l"> <li>lower-alpha</li> <li>lower-alpha</li> </ol>
  <ol class="alpha-u"> <li>upper-alpha</li> <li>upper-alpha</li> </ol>

</body>
</html>

Expected output: A clear visual comparison of all list-style-type values rendered side by side.

What is list-style-image?

Instead of a shape (disc, square, circle), you can use any image file as the bullet point. This is done with the list-style-image property.

Why would you use this? Brand consistency, visual flair, or themed websites. For example, a cooking website might use a small chef's hat icon as a bullet, or a travel blog might use a small plane icon.

Syntax

ul {
  list-style-image: url("path/to/image.png");
}

• url(...) · tells CSS this is a file path or URL
• The path inside the quotes points to your image file

Full Example

<!DOCTYPE html>
<html>
<head>
  <style>
    ul.custom-bullets {
      list-style-image: url("https://www.w3schools.com/css/sqpurple.gif");
    }
  </style>
</head>
<body>

  <ul class="custom-bullets">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>

</body>
</html>

Expected output: Each list item has a small purple square image as its bullet instead of the default disc.

Important note: list-style-image gives you limited control over the size and position of the image. For more precise control, designers often prefer removing the bullet with list-style-type: none and then adding the image using the CSS background-image property on the <li> element, with padding-left to make room for it. We will see this technique in the exercises.

What is list-style-position?

This property controls where the bullet marker is positioned relative to the list item's content box. It has two values: outside (the default) and inside.

outside · Default Behaviour

The bullet marker sits outside the list item's text box. This means if the text wraps to a second line, the wrapped text aligns back to the left edge of the first line · the bullet "hangs" to the left of the text.

ul {
  list-style-position: outside;
}

Visual representation:

● This is a long list item text that wraps
  to the next line and aligns with the
  start of the first line of text.

The bullet hangs outside, and wrapped text indents inward.

inside · Bullet Inside the Content Box

The bullet marker is placed inside the list item's content area. Wrapped lines of text align all the way to the left edge of the container · the same left edge where the bullet sits.

ul {
  list-style-position: inside;
}

Visual representation:

● This is a long list item text that wraps
to the next line and goes all the way to
the left edge, under the bullet.

Comparing Both Side by Side

<!DOCTYPE html>
<html>
<head>
  <style>
    ul.outside-list {
      list-style-position: outside;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 10px 40px;
    }

    ul.inside-list {
      list-style-position: inside;
      background-color: #f0f8ff;
      border: 1px solid #9bc;
      padding: 10px 20px;
    }
  </style>
</head>
<body>

  <h3>Outside (default)</h3>
  <ul class="outside-list">
    <li>This is a list item with enough text to wrap onto the next line so you can see the difference clearly</li>
    <li>Short item</li>
  </ul>

  <h3>Inside</h3>
  <ul class="inside-list">
    <li>This is a list item with enough text to wrap onto the next line so you can see the difference clearly</li>
    <li>Short item</li>
  </ul>

</body>
</html>

Expected output: You can clearly see the text wrapping difference. With outside, wrapped text indents away from the left. With inside, wrapped text aligns with the very left edge of the container.

When to use inside: When you want a compact, aligned look, especially for list items inside cards, sidebar panels, or text-heavy content blocks where indentation would feel excessive.

What is the Shorthand?

Instead of writing three separate properties, you can combine list-style-type, list-style-position, and list-style-image into one line with the list-style shorthand.

Syntax

list-style: [type] [position] [image];

All three values are optional. You only need to include the ones you want to set.

Examples

Set type and position only:

ul {
  list-style: square inside;
}

This is equivalent to:

ul {
  list-style-type: square;
  list-style-position: inside;
  /* list-style-image defaults to none */
}

Set type only:

ol {
  list-style: upper-roman;
}

Equivalent to:

ol {
  list-style-type: upper-roman;
}

Remove all markers:

ul {
  list-style: none;
}

This is the most common shorthand usage · stripping all list styling in one line.

Set image and position:

ul {
  list-style: url("bullet.png") inside;
}

Full Demo

<!DOCTYPE html>
<html>
<head>
  <style>
    ul.features {
      list-style: square inside;
      color: #333;
      font-size: 16px;
      line-height: 1.8;
    }

    ol.steps {
      list-style: upper-roman outside;
      color: #1a237e;
      font-size: 16px;
      line-height: 1.8;
    }
  </style>
</head>
<body>

  <h3>Product Features</h3>
  <ul class="features">
    <li>Lightning fast performance</li>
    <li>Works on all devices</li>
    <li>Free to use forever</li>
  </ul>

  <h3>Setup Steps</h3>
  <ol class="steps">
    <li>Download the installer</li>
    <li>Run the setup wizard</li>
    <li>Launch the application</li>
  </ol>

</body>
</html>

Expected output:

• Features list: square bullets positioned inside, dark grey text
• Steps list: uppercase Roman numerals (I, II, III) positioned outside, dark navy text

Why Remove Default Spacing?

Browsers add default padding-left and sometimes margin to <ul> and <ol> elements. This is what creates the indentation you always see in browser lists. When you are building a navigation menu or a styled card list, this default indentation gets in the way.

The Browser Default (What You Are Fighting)

/* Browser adds this automatically — you cannot see it but it is there */
ul, ol {
  padding-left: 40px;
  margin-top: 1em;
  margin-bottom: 1em;
}

How to Remove It

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Line by line:

• list-style-type: none; · removes the bullet markers
• margin: 0; · removes the vertical space above and below the whole list
• padding: 0; · removes the left indentation

Expected output: The list items appear flush to the left edge of their container, with no bullets and no extra spacing.

This is the foundation of every CSS navigation menu. Once you remove the default list styling, you have a clean, flat group of <li> elements you can style however you want.

CSS treats <li> as a block-level element · meaning you can apply background colours, padding, margins, and borders directly to it. This is how you build styled lists that look like feature tables, settings menus, or product detail panels.

Adding Colour and Background to List Items

<!DOCTYPE html>
<html>
<head>
  <style>
    ul.coloured-list {
      list-style-type: none;
      padding: 0;
      margin: 0;
      width: 220px;
    }

    ul.coloured-list li {
      background-color: #4CAF50;
      color: white;
      padding: 10px 16px;
      margin-bottom: 4px;
    }
  </style>
</head>
<body>

  <ul class="coloured-list">
    <li>Dashboard</li>
    <li>Reports</li>
    <li>Settings</li>
    <li>Log Out</li>
  </ul>

</body>
</html>

Line by line:

• ul.coloured-list li · targets every <li> inside a <ul> with class coloured-list
• background-color: #4CAF50; · gives each item a green background
• color: white; · white text for contrast
• padding: 10px 16px; · breathing room inside each item (10px top/bottom, 16px left/right)
• margin-bottom: 4px; · a small gap between each item

Expected output: A vertical stack of green pills with white text · resembling a sidebar navigation menu.

Adding a Border Separator Between Items

Instead of a margin gap, you can use a bottom border to visually separate items:

ul.bordered-list li {
  padding: 12px 16px;
  border-bottom: 1px solid #ccc;
  background-color: white;
}

ul.bordered-list li:last-child {
  border-bottom: none;  /* Remove border from the very last item */
}

New here: li:last-child is a CSS pseudo-class that selects only the LAST <li> in the list. We remove its bottom border because it is at the bottom of the list and does not need a separator.

Expected output: A clean list with thin grey lines dividing each item · similar to a settings menu or inbox list.

Full Styled Vertical List

<!DOCTYPE html>
<html>
<head>
  <style>
    ul.menu {
      list-style-type: none;
      padding: 0;
      margin: 0;
      width: 200px;
      border: 1px solid #ddd;
      border-radius: 6px;
      overflow: hidden;         /* clips rounded corners at items */
    }

    ul.menu li a {
      display: block;           /* makes the whole row clickable */
      padding: 12px 16px;
      text-decoration: none;
      color: #333;
      background-color: #f9f9f9;
      border-bottom: 1px solid #ddd;
      transition: background-color 0.2s ease;
    }

    ul.menu li:last-child a {
      border-bottom: none;
    }

    ul.menu li a:hover {
      background-color: #e3f2fd;
      color: #0d47a1;
    }
  </style>
</head>
<body>

  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Sign Out</a></li>
  </ul>

</body>
</html>

New things here:

• display: block; on the <a> inside <li> · this makes the entire row (not just the text) clickable. Without this, only the text acts as a clickable area.
• overflow: hidden; on the <ul> · ensures the rounded corners of the border are not broken by the background colour of the first and last items.
• transition: background-color 0.2s ease; · smooth hover colour change.

Expected output: A polished, bordered vertical navigation panel. Each row changes to a soft blue background on hover. The whole row is clickable.

Thinking prompt: What happens if you remove display: block from the <a> tag? The clickable area shrinks to only the text itself. Try it!

Lists are vertical by default. But with CSS, you can arrange list items horizontally · which is exactly how most horizontal navigation bars and breadcrumbs are built.

Making a Horizontal List with display: inline

ul.horizontal {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.horizontal li {
  display: inline;
  margin-right: 20px;
}

display: inline removes the block-level stacking behaviour of <li>. Items now flow side by side like text.

<ul class="horizontal">
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

Expected output: The four items appear on one line, spaced 20px apart.

Making a Horizontal List with display: inline-block

inline-block is usually preferred over inline for list items because it lets you apply padding and height:

ul.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
}

ul.navbar li {
  display: inline-block;
}

ul.navbar li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 14px 20px;
  transition: background-color 0.2s ease;
}

ul.navbar li a:hover {
  background-color: #555;
}

<ul class="navbar">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Expected output: A dark horizontal navigation bar with white text links. Each link's background darkens on hover.

Why display: block on the <a> inside display: inline-block on <li>? The <li> is inline-block, which flows horizontally. The <a> inside is block, which fills the entire <li> so the click area covers the full padded rectangle · not just the text.

When to Use a Background Image Instead of list-style-image

As mentioned earlier, list-style-image is limited. You cannot easily control the size, position, or spacing of the image. A more flexible technique is:

1. Set list-style-type: none to remove the default bullet
2. Add padding-left to the <li> to make space for the image
3. Use background-image + background-repeat: no-repeat + background-position on the <li>

ul.custom-img-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.custom-img-list li {
  padding-left: 30px;                  /* space for the image */
  background-image: url("arrow.png");  /* the image */
  background-repeat: no-repeat;        /* show it only once, not tiled */
  background-position: left center;    /* align image to left, centred vertically */
  background-size: 18px 18px;          /* control the size precisely */
  margin-bottom: 8px;
  line-height: 1.6;
}

Line by line:

• padding-left: 30px; · pushes the text 30px away from the left, creating a visible gap where the image sits
• background-image: url("arrow.png"); · sets the image file as the background
• background-repeat: no-repeat; · prevents the image from tiling/repeating across the element
• background-position: left center; · places the image on the left side, vertically centred within the item's line height
• background-size: 18px 18px; · explicitly controls how large the image renders

Expected output: Each list item has a small icon on the left, with text cleanly pushed to the right of the icon.

This technique is used widely in professional web development for icon-prefixed feature lists.

The W3Schools CSS list code challenges test your ability to apply all the properties above. Here are the core challenge types with full solutions:

Challenge Type 1: Change the List Marker Type

Task: Give the unordered list a square marker style.

<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

Solution:

ul {
  list-style-type: square;
}

Challenge Type 2: Remove All Bullets

Task: Remove the bullet markers from the list.

Solution:

ul {
  list-style-type: none;
}

Challenge Type 3: Set Position to Inside

Task: Place the list marker inside the list item's content box.

Solution:

ul {
  list-style-position: inside;
}

Challenge Type 4: Use the Shorthand

Task: Using the list-style shorthand, set the type to circle and position to inside.

Solution:

ul {
  list-style: circle inside;
}

Challenge Type 5: Use a Custom Image Bullet

Task: Use the image "sqpurple.gif" as the list bullet.

Solution:

ul {
  list-style-image: url("sqpurple.gif");
}

Challenge Type 6: Style a Specific <li> with Colour

Task: Give each list item a tomato background and white text, with 8px 16px padding.

Solution:

li {
  background-color: tomato;
  color: white;
  padding: 8px 16px;
}

Challenge Type 7: Reset Default Padding and Margin

Task: Remove the default browser indentation from the list.

Solution:

ul {
  padding: 0;
  margin: 0;
}

Mistake 1: Forgetting to Remove Default padding-left on <ul>

Wrong:

ul {
  list-style-type: none;
  /* forgot padding: 0 */
}

Problem: The list still has the browser's default padding-left: 40px, so items appear indented even though there are no bullets. This catches many beginners off guard.

Correct:

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

Always reset both padding and margin when removing default list styles.

Mistake 2: Applying display: inline Instead of display: inline-block for Navigations

Wrong:

li {
  display: inline;
  padding: 12px 20px;   /* vertical padding will not work correctly */
}

Problem: display: inline does not honour vertical padding in the same way as inline-block. The items will flow horizontally, but the padding will not expand the clickable area vertically.

Correct:

li {
  display: inline-block;
  padding: 12px 20px;   /* now works perfectly */
}

Mistake 3: Not Adding display: block to the <a> Inside <li>

Wrong:

li a {
  color: white;
  padding: 12px 20px;
  /* missing display: block */
}

Problem: The <a> is still an inline element. The padding will not create a full-height clickable area. Only the text itself is clickable, not the surrounding padded space.

Correct:

li a {
  display: block;   /* makes the full padded area clickable */
  color: white;
  padding: 12px 20px;
}

Mistake 4: Using list-style-image and Wondering Why the Image Looks Odd

Wrong approach (hard to control):

ul {
  list-style-image: url("icon.png");
}

Problem: You cannot control the image size or position precisely.

Better approach:

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding-left: 28px;
  background-image: url("icon.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 18px 18px;
}

This gives you complete control over image size and alignment.

Mistake 5: Applying list-style Shorthand in the Wrong Order

Wrong:

ul {
  list-style: inside square;  /* position before type */
}

Problem: The order matters. The shorthand is type position image. While most browsers are forgiving, writing them in an unusual order can cause confusion or unexpected results.

Correct:

ul {
  list-style: square inside;  /* type then position */
}

Mistake 6: Forgetting overflow: hidden on the <ul> Navbar

Wrong:

ul.navbar {
  background-color: #333;
  /* missing overflow: hidden */
}
ul.navbar li { display: inline-block; }

Problem: If the list items have a background colour, the parent <ul> may not visually contain them (the height collapses). Adding overflow: hidden forces the <ul> to stretch around its children.

Correct:

ul.navbar {
  background-color: #333;
  overflow: hidden;   /* prevents height collapse */
}