DEV Community

Cover image for CSS Styling Lists Tutorial
Richard Rembert
Richard Rembert

Posted on • Updated on

CSS Styling Lists Tutorial

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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");
}
Enter fullscreen mode Exit fullscreen mode

This would be equivalent to:

ul {
 list-style-type: square;
 list-style-position: inside;
 list-style-image: url(goldstar.png);
}
Enter fullscreen mode Exit fullscreen mode

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!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Top comments (1)

Collapse
 
alohci profile image
Nicholas Stimpson

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.