List style

We all use some kind of lists in our daily lives, such as shopping lists, todo lists, etc. In Web development, we work with a lot of lists, and what's better than to have a beautiful list on our website? In this topic we will learn how to style our lists and make them more interesting.

Syntax

The list-style is a shorthand property that allows us to set all the three list-style properties at once.

• list-style-type: Sets the marker type. Default value is disc.

• list-style-position: Sets the position of the marker. Default value is outside.

• list-style-image: Sets an image as a marker. Default value is none.

We can use this property with the parent selector ul and ol or with the child selector li.

If we use it with the parent selector, the style will be applied to all of the children. If we use it with the child selector, the style will be applied only to that specific child.

/* type | position | image*/
ul {
  list-style: type position image;
}

For example, the CSS code below:

ul {
  list-style-type: circle;
  list-style-position: inside;
  list-style-image: none;
}

Would be the same as the following CSS code:

ul {
  list-style: circle inside none;
}

Values of type

Let's start with the type. There are a lot of styles we can use, we'll list the most common of them below. For a more complete list you can check the MDN website.

• circle

• decimal

• georgian

• upper-roman

• lower-greek

<p>Top 5 programming languages 2020</p>
<ul>
  <li>JavaScript</li>
  <li>Python</li>
  <li>Java</li>
  <li>Go</li>
  <li>C++</li>
</ul>

If we use georgian, the list would look like this:

ul {
  list-style-type: georgian;
}

And if we use upper-roman, the list would look like this:

ul {
  list-style-type: upper-roman;
}

Values of position

With position we can set the place of the marker on the list. It accepts two values: outside and inside.

To get a better idea of how this works we will add a border to each li element.

ul {
  border: 1px solid black;
  list-style-position: outside;
}

Now let's see what our list will look like if we set the position to inside.

ul {
  border: 1px solid black;
  list-style-position: inside;
}

As you can see the marker is now inside the border along with the text.

Values of image

We can also use an image as a marker.

ul {
  list-style-image: url('https://findicons.com/files/icons/573/must_have/16/check.png');
}

Please note, that if we use very large images as markers, we may get an undesirable result.

Now we can combine all properties in one: as we are using image, we do not need to set the type.

ul {
  list-style: inside url('https://findicons.com/files/icons/573/must_have/16/check.png');
}

Conclusion

With the list-style property we can make our lists look more beautiful and interesting. We can use different types, change their position, and we can also use an image as a marker. We use the list-style property to combine all the changes in one style.
Remember that it is not possible to use type and image at the same time: an image will replace the type. Now let's practice with some tasks!