CSS Styling Lists Tutorial

#css #writing #tutorial #beginners

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