In this tutorial, we’ll learn how to style lists with CSS!
Remember that in HTML, we have two list types:
Unordered lists <ul>
— list items are defined with bullet points:
- Coffee
- Tea
- Biscuits
Ordered lists <ol>
— list items are defined with numbers (or letters i. ii. iii.):
1- Coffee
2- Tea
3- Biscuits
And each item is given the <li>
tag, like so:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Biscuits</li>
</ol>
We use lists all the time when building on the web! It’s fair to say that most navigation menus are essentially HTML lists, which have been styled using CSS.
How to style lists with CSS
CSS has several properties that we can use for styling. We can set different list item markers, use images as markers, as well as add colors & background colors.
Let’s take a look at the syntax!
List-style-type
We use list-style-type
to set a marker for our list:
li {
list-style-type: square;
}
There are in fact a whole lot of possible values! Such as circle
, square
, decimal
, upper-roman
and none
. See all the list style types.
It’s worth mentioning that if you’re setting the color of the list marker — it’ll default to whatever the element color is.
Also, you’ll often use the list-style-type:none
property to remove the markers completely!
List-style-position
With list-style-position you can position the marker outside (default) or inside of the list content:
li {
list-style-position: outside;
}
li {
list-style-position: inside;
}
When using inside
with lists of text for example, each marker will be contained within the text box, thus indenting the first line of text for each list item.
List-style-image
list-style-image
can be used to place a custom image as a marker:
li {
list-style-image: url(goldstar.png);
}
The URL points to the location of the image.
It’s good practice to also set a list-style-type
as a fallback, in case the image is unavailable.
List-style (Shorthand)
The list-style
shorthand property lets us specify our list-style-type
, list-style-position
& list-style-image
in one declaration.
For example:
ul {
list-style: square inside url("goldstar.png");
}
This would be equivalent to:
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: url(goldstar.png);
}
When using this shorthand property, be mindful of the order: list-style-type
, then list-style-position
and lastly list-style-image
. If any of these properties are missing, they’ll revert to their default state.
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here
Top comments (1)
Surprised there's no mention of the
::marker
pseudo element here.e.g.
Although
::marker
is not exclusively for lists, it's almost certainly its most common use.