CSS Lists

In HTML, there are two main types of lists:

1. Unorder lists (<ul>) : the list items are marked with bullets
2. Ordered lists (<ol>) : the list items are marked with numbers or letters

The CSS list properties allows you to:

Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
Add background colors to lists and list items

List-style-type

The list-style-type property allows to define the type of bullets/numbers used for the unordered/ordered list.

The different values permitted with list-style-type for unordered list are: circle , square, disc, none

Sample code with unordered list

<!DOCTYPE html>
<html>
<head>
<style>
ul{
  list-style-type: circle; /*circle , square, disc, none*/
}
 
</style>
</head>
<body>

<h2>Lets beautify the list</h2>
<p>A simple example of unordered list</p>
<ul>
  <li>Football</li>
  <li>Cricket</li>
  <li>Badminton</li>
</ul>
 

</body>
</html>

list-style-type can also be used with the ordered list. The different values permitted with list-style-type for ordered list are:
Decimal, decimal-leading-zero, upper-roman, lower-roman,none

Sample code with ordered list

<!DOCTYPE html>
<html>
<head>
<style>
ol  {
  list-style-type: decimal; /*Decimal, decimal-leading-zero, upper-roman, lower-roman,none*/
}
 
</style>
</head>
<body>

<h2>Lets beautify the list</h2>
<p>A simple example of ordered list</p>
<ol>
  <li>Football</li>
  <li>Cricket</li>
  <li>Badminton</li>
</ol>
 
</body>
</html>

A better way to achieve the above output is by using classes as shown below

<!DOCTYPE html>
<html>
<head>
<style>
.a {
 list-style-type: circle; /*circle , square, disc, none*/
}
.b {
   list-style-type: decimal; /*Decimal, decimal-leading-zero, upper-roman, lower-roman,none*/
}
 
</style>
</head>
<body>

<h2>Lets beautify the list</h2>
<p>A simple example of  list using classes</p>
<ul class="a">
  <li>Football</li>
  <li>Cricket</li>
  <li>Badminton</li>
</ul>

<ol class="b">
  <li>Grapes</li>
  <li>Bananas</li>
  <li>Watermelon</li>
</ol>
  

</body>
</html>

Using an Image As The List Item Marker

List-style-image

Sample code

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-image: url('bullet.gif');
}
</style>
</head>
<body>

<h1>Illustration of list-style-image Property</h1>

<p>The list-style-image property replaces the list-item marker with an image:</p>

<ul>
  <li>Football</li>
  <li>Cricket</li>
  <li>CBadminton</li>
</ul>

</body>
</html>

Values

In the above example, “bullet.gif” is the name of image. Image size should be small.

Position The List Item Marker

List-style-position

Sample code

<!DOCTYPE html>
<html>
<head>
<style>
.a {
  list-style-position: outside;
}

.b {
  list-style-position: inside;
}
</style>
</head>
<body>

<h1>The list-style-position Property</h1>

<h2>list-style-position: outside (default):</h2>
<ul class="a">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra nunc a purus laoreet pulvinar.  </li>
  <li>Fusce vitae euismod turpis. Morbi libero ligula, pellentesque dictum elementum commodo</li>
  <li>ullamcorper quis massa. Quisque vitae purus a metus accumsan rutrum. Vivamus vel diam sed lectus convallis placerat et nec neque.</li>
</ul>

<ul class="b">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra nunc a purus laoreet pulvinar.  </li>
  <li>Fusce vitae euismod turpis. Morbi libero ligula, pellentesque dictum elementum commodo</li>
  <li>ullamcorper quis massa. Quisque vitae purus a metus accumsan rutrum. Vivamus vel diam sed lectus convallis placerat et nec neque.</li>
</ul>

</body>
</html>

Values permitted for List-Style-Position are : Inside, outside

List – Shorthand Property

List-style

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Sample code

ul {list-style: square inside url(â€œbullet.gifâ€);}

When using the shorthand property, the order of the property values are: List-style-type, list-style-position, list-style-image

If any of the property values above are missing, the default value for the missing property will be inserted, if any.

Example code

<!DOCTYPE html>
<html>
<head>
<style>
ul  {
  list-style: disc outside url("bullet.gif");
}
</style>
</head>
<body>

<h1>The list-style Property</h1>

<p>The list-style is a shorthand property for all the list properties.</p>

<ul>
  <li>Football</li>
  <li>Cricket</li>
  <li>Badminton</li>
</ul>

</body>
</html>

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

Anything added to the <ol> or <li> tag affects the entire list, while properties added to the <li> tag will affect the individual list items. See the example below

<!DOCTYPE html>
<html>
<head>
<style>
ul { width:60%; background:#ff9999; padding:20px;}
ul li{background:#ffe5e5; padding:5px; margin-left:35px;}
</style>
</head>
<body>

<h1>The list-style Property</h1>

<p>The list-style is a shorthand property for all the list properties.</p>

<ul>
  <li>Football</li>
  <li>Cricket</li>
  <li>Badminton</li>
</ul>

</body>
</html>