CSS Styling Lists
CSS controls the marker, its position, and the overall spacing of lists, and it can strip markers entirely to build navigation menus.
Both unordered lists (<ul>) and ordered lists (<ol>) come with default markers and indentation. A handful of list-style properties let you swap the marker, hide it, or replace it with your own image.
Choosing the marker
Setting the marker type
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: square;
}
ol {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
<ol>
<li>Preheat oven</li>
<li>Mix ingredients</li>
<li>Bake</li>
</ol>
</body>
</html>Marker position and images
By default the marker sits outside the text block. list-style-position: inside moves it into the flow so wrapped lines align under the marker. You can also point list-style-image at a small graphic.
Position and image
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-position: inside;
list-style-image: url('check.png');
}
</style>
</head>
<body>
<ul>
<li>Book the venue for the conference</li>
<li>Send invitations to speakers</li>
<li>Confirm catering</li>
</ul>
</body>
</html>Lists as navigation menus
A very common pattern is to remove the markers and default spacing, then lay the items out in a row. Set <list-style> to none and reset margin and padding to zero. See CSS Display for how the layout values work.
Horizontal menu
<!DOCTYPE html>
<html>
<head>
<style>
ul.menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu li {
display: inline-block;
margin-right: 16px;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>Exercise: CSS Lists
Which property changes list bullets to square markers?
