List style type CSS

How to change a list style?

For both ordered and unordered list, to change a list style type all we have to do is to use the list-style-type CSS property.

Let’s say that we have the list below from my previous post that you can check here: https://purpose-code.com/html-lists/

To apply a list-style-type to our list we’ll use the following code:

So at the end we’ll have:

The entire code will look like this:

Let’s give another value to the list-style-type property and see what comes out.

This time we’ll give it lower-roman as a value.

So the code will be:

So our list becomes:

This time instead of bullets or numbers or lower-alpha or lower-roman characters we want to add an image. How can we do that?

We can achieve this result simply by using list-style-image property instead of list-style-type.

The value we’ll give to the list-style-image property is an image. If you have a big image better resize it first using one of the tools on the internet and then add it to the CSS code.

On my side I have an image already resized (20px * 20px), so I will use this one.

The code for that is:

At the end we have the following results:

Below are some other values that you can add to the list-style-type property, don’t hesitate to play with them to see the outcome: