List-style

In this chapter we will learn about list-style property.

CSS list-style property is a shorthand property which we can set all the list-style properties (CSS list-style-image property , CSS list-style-position property , CSS list-style-type property ) at once.

You can set all the properties with this order: 1- CSS list-style-type property , 2- CSS list-style-position property , 3- CSS list-style-image property

If there is a missing among the properties above; it will set it automatically to the default.

CSS Syntax

list-style: list-style-type list-style-position list-style-image | initial | inherit;

Here's an example of the syntax:

ol { list-style: inside upper-alpha none;}

Which would be the same as the following longhand version:

ol {
 list-style-type: upper-alpha ;
 list-style-position:  inside ;
 list-style-image: none;
}

Property Values

Value Descriptions
list-style-type It is used to define the type of the list-item marker. See more here: CSS list-style-type property
list-style-position It is used to define where the list item marker will be placed. See more here: CSS list-style-position property
list-style-image It is used to place an image instead of a list-item marker. See more here: CSS list-style-image property
initial It makes the property use its default value.
inherit It inherits the property from its parents element.