Styling Lists
Explore how to style HTML lists with CSS by controlling list markers, positioning, and using custom images. Understand the list-style-type property, list-style-position options, and how to apply the shorthand list-style property to create visually appealing web lists.
Types of lists
In HTML, there are two list types:
Unordered lists (<ul>) are list items that use bullet points:
- Coffee
- Tea
- Biscuits
Ordered lists <ol> are list items that are numbered (or use i., ii., and iii.):
- Coffee
- Tea
- Biscuits
Each item is given the <li> tag, like in the example below:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Biscuits</li>
</ol>
We use lists all the time when building on the web. Most navigation menus are HTML lists, which have been styled using CSS. ...