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:

Ordered list

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

lower-alpha value

So at the end we’ll have:

_longest_content - longest_content -->
Lower-alpha results

The entire code will look like this:

nd Ezoic - wp_incontent_7 - incontent_7 -->
Entire Code

Let’s give another value to the list-style-type

k> property and see what comes out.

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

So the code will be:

lower-roman value

So our list becomes:

lower-roman results

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:

list-style-image 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:


Get new content delivered directly to your inbox

Leave a Reply

%d bloggers like this: