CSS list-style Property Tutorial

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:

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?


  • 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”

Top Technologies