CSS List Properties

CSS list properties allow you to:

Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set list item markers as images

Lists in HTML

In HTML, there are two types of lists:

Unordered lists (ul) - list items are marked with special symbols (e.g., bullet points, squares)
Ordered lists (ol) - list items are marked with numbers or letters

With CSS, you can further style these lists and use images as list item markers.

Unordered Lists Example:

Coffee
Tea
Coca Cola

Ordered Lists Example:

Coffee
Tea
Coca Cola

Different List Item Markers

The list-style-type property specifies the type of list item marker:

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;}

Circle type

Square type

Upper-roman type

Lower-alpha type

Using Images as List Item Markers

To specify an image as the list item marker, use the list-style-image property:

ul {
  list-style-image: url('sqpurple.gif');
}

The example above may display differently in various browsers. For consistent display across all browsers, use the following browser compatibility solution:

Browser Compatibility Solution

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul li {
  background-image: url(sqpurple.gif);
  background-repeat: no-repeat;
  background-position: 0 5px;
  padding-left: 14px;
}

Explanation:

Set the list type to none and remove padding and margin for browser compatibility.
For all li elements in the ul, set the background image, no-repeat, position, and padding-left.

Shorthand Property for Lists

All list properties can be specified in a single shorthand property:

ul {
  list-style: square url("sqpurple.gif");
}

This sets the following properties in order:

list-style-type
list-style-position (see CSS property table below)
list-style-image

Missing values will still apply in the specified order.

Removing Default Settings

The list-style-type:none property can be used to remove default markers. Use margin:0 and padding:0 to remove default padding and margin:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

All CSS List Properties

Property	Description
`list-style`	Shorthand property for all list properties
`list-style-image`	Specifies an image as the list item marker
`list-style-position`	Specifies the position of the list item marker
`list-style-type`	Specifies the type of list item marker

More Examples

All different list item markers are demonstrated in the example below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}

ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}

ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}

</style>
</head>

<body>
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>