Styling Lists with CSS

There are three different properties for styling list-items:

1. list-style-type (default: disc) 
2. list-style-image (default: outside) 
3. list-style-position (default: none) 

NOTE: above properties need to be declared in that order.

We can declare each property separately, or we can use list-style shorthand property.

list-style-type

list-style-type defines the shape/type of bullet point for each list-item.

We can add these values for list-style-type:

1. disc
2. circle
3. square
4. decimal
5. lower-roman
6. upper-roman
7. none

Example

li {
 list-style-type: square;
}

li {
 list-style-type: circle;
}

list-style-image

If we want to display an image instead of bullet point, we can use  list-style-image.

We can pass URL or local image as value.

li {
 list-style-image: url(images/image.png);
}

list-style-position

It defines where to position the list-item marker. We can add two values, either “inside” or “outside”.

li {
 list-style-position: outside;
}

Share this post