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
>
<
h1
style
=
"text-align: center; color: green"
>
list-style-type: disc;
</
h1
>
<
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
>
<
h1
style
=
"text-align: center; color: green"
>
list-style-type: circle;
</
h1
>
<
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
>
<
h1
style
=
"text-align: center; color: green"
>
list-style-type: square;
</
h1
>
<
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
>
<
h1
style
=
"text-align: center; color: green"
>
list-style-type: decimal;
</
h1
>
<
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
>
<
h1
style
=
"text-align: center; color: green"
>
list-style-type: lower-roman;
</
h1
>
<
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
>
<
h1
style
=
"text-align: center; color: green"
>
list-style-type: upper-roman;
</
h1
>
<
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
>
<
h1
style
=
"text-align: center; color: green"
>
list-style-type: lower-greek;
</
h1
>
<
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
>
<
h1
style
=
"text-align: center; color: green"
>
list-style-type: lower-latin;
</
h1
>
<
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
>
<
h1
style
=
"text-align: center; color: green"
>
list-style-type: upper-latin;
</
h1
>
<
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
>
<
h1
style
=
"text-align: center; color: green"
>
list-style-type: none;
</
h1
>
<
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