How to Style Lists Using CSS

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

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

Some default style options are available for both ordered and unordered lists, as shown in the demo below.

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

If these options are not enough, you can always 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 customizations, 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 "@rule". They are special directives that control how CSS behaves. Each @rule has a unique purpose, which we have discussed in the linked article.

Image marker

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

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 loading the image marker.jpg, assuming you have the following file structure.

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

Control list numbering

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

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.

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.

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,and we will return to this topic in future lessons.