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/

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:

list-style-image

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:

circle
square
upper-roman
upper-alpha
georgian
hebrew
katakana
hiragana

Get new content delivered directly to your inbox

Leave a Reply

%d bloggers like this: