In this section, we will learn what the list-style property is and how to use it in CSS.

Click here to run the example of list-style property.

CSS list-style Property Definition and Usage

The CSS `list-style` property is a shorthand property and is used to set values for the following properties in one declaration:

• list-style-type
• list-style-position
• list-style-image

CSS list-style Property Syntax

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

CSS list-style Property Value

• Position: the first value is the position of the maker for a list-item.
• Type: the second value is the type of the marker.
• Image-address: in case we wanted to set an image for the marker, we set the address of that image as the third value for this property.

Note: the two global values “initial” and “inherit” can also be used as the value for this property.

Example: list-style in CSS

See the Pen list-style in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS list-style Property Work?

Note:

• The default value for list-style-type is “disc”
• The default value for list-style-position is “outside”
• The default value for list-style-image is “none”