In this section, we will learn what the list-style-type property is and how to use it in CSS.
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.
