CSS Lists – Styling Ordered, Unordered, and Custom Lists

Lists are a foundational HTML structure used for menus, navigation, content blocks, and more. With CSS, you can style these lists beyond basic bullets and numbers — from custom list markers to horizontal navigation bars.

This guide explains how to use CSS to control list styles, spacing, markers, images, positioning, and advanced customizations.

What are HTML Lists?

HTML provides built-in list elements to group related content items:

• <ul>: Unordered List (bullets)
• <ol>: Ordered List (numbers, letters)
• <li>: List Item

Example:

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

Types of Lists in HTML

Styling Lists with list-style

The list-style property is a shorthand that controls marker type, image, and position:

ul {
  list-style: square inside;
}

Breaks down to:

• list-style-type: square
• list-style-position: inside

Using list-style-type

Controls the bullet or numbering style.

For Unordered Lists:

ul {
  list-style-type: circle; /* other values: disc, square, none */
}

For Ordered Lists:

ol {
  list-style-type: upper-roman; /* others: decimal, lower-alpha, etc. */
}

Common Values:

• disc, circle, square (for <ul>)
• decimal, upper-roman, lower-alpha (for <ol>)

Using list-style-image

Replaces default bullets with custom images.

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

Tip: Ensure the image is small (16×16px) and optimized.

Customizing List Position with list-style-position

Defines where the marker appears relative to content.

ul {
  list-style-position: inside; /* or 'outside' */
}

Shorthand: list-style

Combine all three in one line:

ul {
  list-style: square url('icon.png') inside;
}

Format: list-style-type list-style-image list-style-position

Removing List Bullets

Perfect for nav menus or when using custom styles:

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

Also removes default spacing for clean layout control.

Controlling List Spacing

Control spacing using:

ul li {
  margin-bottom: 0.5em;
  padding-left: 10px;
}

Also consider using gap for flex-based lists:

ul {
  display: flex;
  gap: 1rem;
}

Advanced List Customization

You can combine lists with:

• CSS Counters for custom numbering
• Pseudo-elements (::before) to create custom bullets
• Flexbox/Grid for horizontal/column layouts

ul li::before {
  content: '';
  margin-right: 5px;
}

Real-World Use Cases

Summary – CSS Lists

HTML Lists provide essential grouping.

CSS gives full control over:

• Marker type (list-style-type)
• Marker image (list-style-image)
• Positioning (list-style-position)
• Removing bullets & spacing

With Flexbox, pseudo-elements, and CSS counters, you can build beautiful menus, step-by-step guides, and interactive UIs.

Next: Learn about CSS Combinators or explore 💅 CSS Box Model for layout control.

FAQ – CSS Lists

1. How do I remove list bullets completely?

Use list-style: none; and reset padding/margin.

2. Can I add emojis as list markers?

Yes, with ::before and content:

li::before {
  content: " ";
}

3. Why does my custom bullet image not show?

Ensure the image path is correct and image is small and square (e.g., 16×16px).

4. How to make lists horizontal?

Use Flexbox:

ul {
  display: flex;
  list-style: none;
}