list-style-type
The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.
The color of the marker will be the same as the computed color of the element it applies to.
Only a few elements (<li> and <summary>) have a default value of display: list-item. However, the list-style-type property may be applied to any element whose display value is set to list-item. Moreover, because this property is inherited, it can be set on a parent element (commonly <ol> or <ul>) to make it apply to all list items.
list-style
The list-style CSS shorthand property allows you to set all the list style properties at once.
Note: This property is applied to list items, i.e., elements with display: list-item; . By default this includes <li> elements. Because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the items inside.
CSS list-style-type Property
Example
Set some different list styles:
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
More "Try it Yourself" examples below.
CSS Lists
CSS: list-style-type property
This CSS tutorial explains how to use the CSS property called list-style-type with syntax and examples.
CSS | list-style-type Property
The list-style-type property in CSS specifies the appearance of the list item marker (such as a disc, character, or custom counter style) if ‘list-style-image’ has the value ‘none’.
Syntax:
list-style-type: disc|circle|square|decimal|lower-roman|upper-roman| lower-greek|lower-latin|upper-latin|lower-alpha|upper-alpha|none| inherit;Property values:
-
disc:This is the default value. The marker is a filled circle.
Syntax: list-style-type: disc;Example:
<!DOCTYPE html><html><head><title>CSS list-style-type Property</title><style>.geek1 {list-style-type: disc;}</style></head><body><h2 style = "text-align: center; color: green">list-style-type: disc;</h2><p>Sorting Algorithms</p><ul class="geek1"><li>Bubble Sort </li><li>Merge Sort</li><li>Insertion Sort</li></ul></body></html>Output:
-
circle:The marker is a hollow circle.
Syntax: list-style-type: circle;Example:
<!DOCTYPE html><html><head><title>CSS list-style-type Property</title><style>.geek1 {list-style-type: circle;}</style></head><body><h2 style = "text-align: center; color: green">list-style-type: circle;</h2><p>Sorting Algorithms</p><ul class="geek1"><li>Bubble Sort </li><li>Merge Sort</li><li>Insertion Sort</li></ul></body></html>Output:
-
square:The marker is a square.
Syntax: list-style-type: square;Example:
<!DOCTYPE html><html><head><title>CSS list-style-type Property</title><style>.geek1 {list-style-type: square;}</style></head><body><h2 style = "text-align: center; color: green">list-style-type: square;</h2><p>Sorting Algorithms</p><ul class="geek1"><li>Bubble Sort </li><li>Merge Sort</li><li>Insertion Sort</li></ul></body></html>Output:
-
decimal:The marker is a decimal numbers, beginning with 1.
Syntax: list-style-type: decimal;Example:
<!DOCTYPE html><html><head><title>CSS list-style-type Property</title><style>.geek1 {list-style-type: decimal;}</style></head><body><h2 style = "text-align: center; color: green">list-style-type: decimal;</h2><p>Sorting Algorithms</p><ul class="geek1"><li>Bubble Sort </li><li>Merge Sort</li><li>Insertion Sort</li></ul></body></html>Output:
-
lower-roman:The marker is a lowercase roman numerals (i, ii, iii, iv, v, etc.).
Syntax:
list-style-type: lower-roman;Example:
<!DOCTYPE html><html><head><title>CSS list-style-type Property</title><style>.geek1 {list-style-type: lower-roman;}</style></head><body><h2 style = "text-align: center; color: green">list-style-type: lower-roman;</h2><p>Sorting Algorithms</p><ul class="geek1"><li>Bubble Sort </li><li>Merge Sort</li><li>Insertion Sort</li></ul></body></html>Output:
-
upper-roman:The marker is a uppercase roman numerals (I, II, III, IV, V, etc.).
Syntax:
list-style-type: upper-roman;Example:
<!DOCTYPE html><html><head><title>CSS list-style-type Property</title><style>.geek1 {list-style-type: upper-roman;}</style></head><body><h2 style = "text-align: center; color: green">list-style-type: upper-roman;</h2><p>Sorting Algorithms</p><ul class="geek1"><li>Bubble Sort </li><li>Merge Sort</li><li>Insertion Sort</li></ul></body></html>Output:
-
lower-greek:The marker is a lowercase classical Greek alpha, beta, gamma, … (?, ?, ?, …).
Syntax:
list-style-type: lower-greek;Example:
<!DOCTYPE html><html><head><title>CSS list-style-type Property</title><style>.geek1 {list-style-type: lower-greek;}</style></head><body><h2 style = "text-align: center; color: green">list-style-type: lower-greek;</h2><p>Sorting Algorithms</p><ul class="geek1"><li>Bubble Sort </li><li>Merge Sort</li><li>Insertion Sort</li></ul></body></html>Output:
-
lower-latin:The marker is a lowercase ascii letters (a, b, c, … z).
Syntax:
list-style-type: lower-latin;Example:
<!DOCTYPE html><html><head><title>CSS list-style-type Property</title><style>.geek1 {list-style-type: lower-latin;}</style></head><body><h2 style = "text-align: center; color: green">list-style-type: lower-latin;</h2><p>Sorting Algorithms</p><ul class="geek1"><li>Bubble Sort </li><li>Merge Sort</li><li>Insertion Sort</li></ul></body></html>Output:
-
upper-latin:The marker is a uppercase ascii letters (A, B, C, … Z).
Syntax:
list-style-type: upper-latin;Example:
<!DOCTYPE html><html><head><title>CSS list-style-type Property</title><style>.geek1 {list-style-type: upper-latin;}</style></head><body><h2 style = "text-align: center; color: green">list-style-type: upper-latin;</h2><p>Sorting Algorithms</p><ul class="geek1"><li>Bubble Sort </li><li>Merge Sort</li><li>Insertion Sort</li></ul></body></html>Output:
-
none:No marker is shown in this mode.
Syntax: list-style-type: none;Example:
<!DOCTYPE html><html><head><title>CSS list-style-type Property</title><style>.geek1 {list-style-type: none;}</style></head><body><h2 style = "text-align: center; color: green">list-style-type: none;</h2><p>Sorting Algorithms</p><ul class="geek1"><li>Bubble Sort </li><li>Merge Sort</li><li>Insertion Sort</li></ul></body></html>Output:
Note: lower-alpha and upper-alpha are same as lower-latin and upper-latin respectively.
Supported Browsers: The browser supported by list-style-type property are listed below:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 7.0
- Apple Safari 1.0
CSS list-style-type
The CSS list-style-type property is used for specifying the "list style type" (how list item markers should be styled).
You can specify the list style type as one of the predefined counter styles (e.g., a disc, square, roman numerals, etc) or you can use your own customized counter style. You can create your own custom counter style with the @counter-style at-rule, then refer to that style in list-style-type by simply adding that counter style's name as the value for list-style-type.
You can also provide a string as the value (the string becomes the marker) or use the symbols() function as a quick way to add a custom marker style.
Also see the list-style, list-style-position and list-style-image properties.