How to Style Lists Using CSS

Customizing list marker

Previously, we introduced two most common lists in HTML: ordered and unordered. By default, unordered lists are marked by filled circles, and ordered lists are marked with numbers.

You can, in fact, customize the list marker using the list-style-type property.

css

1ul {
2  list-style-type: circle;
3}
4
5ol {
6  list-style-type: georgian;
7}

There are some default style options for both ordered and unordered lists.

There are many more variants for ordered lists, as it has to account for the numbering system in many different languages. We cannot include all of them in this demo, but here is a full list of all built-in values for list-style-type.

If these are not enough, you can extend the default options by passing a string value to the list-style-type property:

In this example, \1F600 is the textual representation of the emoji character. You can find a full list of emojis and their corresponding code on unicode.org.

For more complex customization, you will have to use @counter-style, which defines how list counters are converted into string representations. For example,

The @counter-style is called an "at rule". They are statements that tell CSS how to behave. Each has a unique purpose, which we have discussed previously in the linked article.

Image marker

Besides these basic textual markers, you can also replace them with images using the list-style-image property.

css

1ul {
2  list-style-image: url(marker.jpg);
3}

url() is a CSS function used to load an external file, and in this case, we are using it to load the image marker.jpg, assuming you have the following file structure.

text

1.
2├── marker.jpg
3├── index.html
4└── style.css

Control list numbering

You can further customize the ordered list by controlling its numbering. For example, you can use the start attribute to control the starting number of the list.

html

1<ol start="4">
2  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
3  <li>Etiam ut quam at lacus volutpat congue eu at risus.</li>
4  <li>Integer sed mauris lacinia augue aliquet ultricies.</li>
5  <li>Ut quis magna ante.</li>
6</ol>

You can also use the reversed attribute to make the list count in the reversed order.

html

1<ol start="4" reversed>
2  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
3  <li>Etiam ut quam at lacus volutpat congue eu at risus.</li>
4  <li>Integer sed mauris lacinia augue aliquet ultricies.</li>
5  <li>Ut quis magna ante.</li>
6</ol>

If you want to micro-manage the numbering of individual list items, use the value attribute.

html

1<ol>
2  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
3  <li value="5">Etiam ut quam at lacus volutpat congue eu at risus.</li>
4  <li>Integer sed mauris lacinia augue aliquet ultricies.</li>
5  <li>Ut quis magna ante.</li>
6</ol>

List spacing

When designing webpages, it is good to leave some white spaces between elements so they don't look too crowded.

To add extra spacing between list elements, you can utilize the margin technique, which we are going to discuss in the box model lesson. For example, you can add a 10px bottom margin for each <li> element like this:

Customizing text

You can also customize the text in your list using the same style rules we discussed in the typography lessons.

Multi-column lists

Sometimes, the list you create takes up too much vertical space, so it might be a good idea to create a multi-column list instead. This can be done using the column-count property.

The column-count property is a very important CSS property when it comes to creating webpage layout. It can be applied to almost all HTML components, not just lists.

This is only an example to show you what it can do, and we will return to this topic later.

Prev Next