Which style can be added to the list items by using list-style-type property?

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.

Table of Contents Show

list-style-type
CSS list-style-type Property
CSS: list-style-type property
CSS | list-style-type Property
CSS list-style-type

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

❮ Previous Complete CSS Reference Next ❯

Example

Set some different list styles:

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Try it Yourself »

More "Try it Yourself" examples below.

CSS Lists

❮ Previous Next ❯

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:

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

Article Tags :

CSS

HTML

Web Technologies

CSS-Properties

Practice Tags :

HTML

Read Full Article

CSS list-style-type

Run

Stack editor Unstack editor

Editor Preview

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.