CSS Tutorial
CSS Lists
HTML lists organise related items, and CSS controls how their markers look. You can change bullet shapes, swap in an image, remove markers entirely, or turn a plain list into a horizontal navigation bar.
Styling lists
There are two everyday list types: unordered lists <ul> that show bullets, and ordered lists <ol> that show numbers. CSS styles both mainly through the list-style family of properties, which set the marker's shape, its position, and an optional image.
Changing the marker with list-style-type
The list-style-type property picks which marker appears. Unordered lists accept values like disc, circle, and square; ordered lists accept decimal, lower-alpha, upper-roman, and more.
| Value | Used with | Marker shown |
|---|---|---|
| disc | ul | Filled round bullet (default) |
| circle | ul | Hollow round bullet |
| square | ul | Filled square bullet |
| decimal | ol | 1, 2, 3 … |
| lower-alpha | ol | a, b, c … |
| upper-roman | ol | I, II, III … |
| none | both | No marker at all |
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }
ul.square { list-style-type: square; color: #0f766e; }
ol.roman { list-style-type: upper-roman; color: #7c3aed; }
</style>
</head>
<body>
<ul class="square">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="roman">
<li>Plan</li>
<li>Build</li>
<li>Ship</li>
</ol>
</body>
</html>Removing bullets and padding
Browsers add default left padding and a marker to lists. Set list-style-type: none and zero the margin and padding to get a clean, marker-free list — the usual starting point for menus.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }
ul.clean {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.clean li { padding: 6px 0; }
</style>
</head>
<body>
<ul class="clean">
<li>No bullet here</li>
<li>Or here</li>
<li>Clean and flat</li>
</ul>
</body>
</html>A horizontal navigation menu
Combine a marker-free list with display styling on the list items to lay them out in a row. This is the classic way to build a site's top navigation.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }
ul.nav {
list-style: none;
margin: 0;
padding: 0;
background: #1e293b;
display: flex;
}
ul.nav li a {
display: block;
padding: 14px 20px;
color: white;
text-decoration: none;
}
ul.nav li a:hover { background: #334155; }
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>The shorthand list-style sets type, position, and image at once, for example list-style: square inside url(dot.png).
Key points
- list-style-type changes the bullet or number style.
- list-style-position: inside or outside controls whether the marker sits inside the content box.
- Set list-style: none plus zero margin and padding to strip a list bare.
- A cleaned list with display: flex becomes a horizontal navigation menu.