CSS Lists

Every bullet point and numbered step you've ever seen on the web comes from an HTML list styled with CSS. By default, browsers add their own bullets or numbers automatically, but CSS gives you full control to change, customize, or remove that styling entirely. list-style-type controls the marker shape (a bullet, a number, letters, or none at all), list-style-image swaps that marker for a custom picture, and list-style-position controls whether the marker sits inside or outside the content flow. There's a shorthand list-style property too, and it's extremely common to strip a list's default styling entirely when using it for layout, like a navigation menu. Lists show up constantly on a real site like cookiescursor.com, from simple feature bullet points to fully custom-styled navigation bars built out of list items.

In this page:

list-style-type
list-style-image
list-style-position
Shorthand list-style Property
Lists as Navigation Menus

list-style-type

list-style-type sets the shape of a list's markers, like disc (a filled circle), decimal (numbers), or none (no marker at all). Setting this to none is a common first step when building custom navigation menus out of list markup.

Note: Unordered lists default to disc and ordered lists default to decimal, but you can mix and match, like using letters for a sub-list.

Warning: Setting list-style-type: none removes only the visible marker, the list items themselves may still keep their default left padding.

Example: list-style-type

css

<style>
ul {
  list-style-type: square;
}
ol {
  list-style-type: decimal;
}
</style>
<ul><li>Item</li></ul>
<ol><li>Item</li></ol>

list-style-image

list-style-image replaces a list's marker with a custom image, referenced with url(), giving lists a distinctive branded look beyond the standard bullet shapes. If the referenced image fails to load, most browsers silently fall back to no marker at all rather than the default bullet.

Note: Keep custom marker images small and simple, an overly large or detailed marker image can throw off a list's vertical rhythm.

Warning: Always pair list-style-image with a list-style-type fallback, in case the custom image fails to load.

Example: list-style-image

css

<style>
li {
  list-style-image: url('https://placehold.co/16x16');
}
</style>
<ul><li>Custom marker image</li></ul>

list-style-position

list-style-position controls whether a marker sits outside the list item's content box (the default) or inside it, which changes how wrapped lines of a long list item align with the marker.

Note: Use list-style-position: inside when you want wrapped lines in a list item to align flush with the marker instead of the text above it.

Warning: Switching to inside positioning can make list items look visually different from outside positioning, especially with longer, multi-line content.

Example: list-style-position

css

<style>
.outside { list-style-position: outside; }
.inside { list-style-position: inside; }
</style>
<ul class="outside"><li>Marker sits outside the content box</li></ul>
<ul class="inside"><li>Marker sits inside the content box</li></ul>

Shorthand list-style Property

The list-style shorthand combines type, position, and image into a single declaration, in any order, similar in spirit to other CSS shorthand properties. As with other CSS shorthands, any value you omit resets to its default rather than staying at its previous value.

Note: The shorthand is a quick way to fully define a list's marker behavior in one line once you're comfortable with the individual properties.

Warning: Any part left out of the shorthand resets to its default, which can silently remove a setting defined elsewhere in your CSS.

Example: Shorthand list-style Property

css

<style>
ul {
  list-style: square inside url('https://placehold.co/16x16');
}
</style>
<ul><li>Type, position, and image in one line</li></ul>

Lists as Navigation Menus

A semantic, unordered list is the standard, accessible foundation for a navigation menu, styled with list-style: none and flex layout to arrange items horizontally instead of stacked vertically.

Note: Keep using a real ul/li structure for navigation even after removing bullets, screen readers still announce it as a proper list of items.

Warning: Replacing a semantic list with plain divs for a navigation menu removes structural meaning that assistive technology relies on.

Example: Lists as Navigation Menus

css

<style>
ul {
  list-style: none;
  display: flex;
  gap: 10px;
}
li {
  background: lightblue;
  padding: 6px 10px;
}
</style>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
</ul>

Common Mistakes

Forgetting that removing default list styles (list-style: none) also removes the left indent some browsers apply, requiring you to reset padding too.
Using list-style-image without a fallback list-style-type in case the custom image fails to load.
Styling a navigation menu with plain divs instead of a semantic list, missing out on the built-in structure lists provide.

Chapter Summary

list-style-type sets the marker style (disc, decimal, none, and more) for list items.
list-style-image swaps the default marker for a custom image, and list-style-position controls its placement.
list-style: none is commonly used to strip default bullets when a list is being used for layout, like navigation.

Browser Support

All standard CSS list-style properties covered here are supported by every modern browser.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Links Next Lesson → CSS Tables