CSS list-style-type Property Tutorial

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

CSS list-style-type property

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

CSS list-style-type Property Definition and Usage

We use `list-style-type` property to change the shape (Also known as marker) that resides before each list item (<li>) in an HTML document.

CSS list-style-type Property Syntax

list-style-type: value;

CSS list-style-type Property Value

The most used values for this property are:

  • decimal = 1 2 3 …
  • decimal-leading-zero = 01 02 03 …
  • lower-alpha = a b c …
  • upper-alpha = A B C …
  • lower-roman = i. ii. iii.
  • Upper-roman = I II III
  • circle
  • square
  • disc

Note: The default value for `list-style-type` in <ul> element is “disc” and in <ol> element is “decimal number”.

Example: list-style-type in CSS

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

How Does CSS list-style-type Property Work?

Note: this property can be applied directly on <ol>, <ul> and <li> elements.

Leave a Reply