CSS list-style Property

Learn about the CSS list-style Property, its usages, syntax and examples.
Submitted by Shahnail Khan, on March 06, 2022

There is no doubt that lists in HTML are of great importance to enrich your website. Lists can be ordered or unordered. Ordered lists are marked with numbers or alphabets whereas unordered lists are marked with bullets. We define a CSS property, namely, list-style to design list item elements like bullets, numbers, or alphabets.

Let's understand this property in detail.

What is list-style Property?

As the name suggests, list-style is a CSS property used to style the elements in the list. It consists of three other properties—list-style-type, list-style-position and list-style-image whose default values are disc, outside and none. These properties are used in customizing list markers.

Syntax:

list-style: list-style-type list-style-position list-style-image |initial |inherit;

Quick overview of the syntax used,

list-style-type - It is used to set a particular type of marker in the list such as bullets, disc, numbers, etc.
list-style-position - It is used in positioning a marker element in the list.
list-style-image - It is used to place an image as a marker in the list.

The examples given below illustrates the use of list-style property

Example 1:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
      <title>Document</title>
   </head>
   <style>
      ul {
      color: blueviolet;
      list-style-type: decimal-leading-zero;
      list-style-position: inside;
      }
   </style>
   
   <body>
      <h2>Welcome to IncludeHelp!</h2>
      <p>Elements of website design-</p>
      <ul>
         <li>Navigation</li>
         <li>Content</li>
         <li>Visual design</li>
      </ul>
   </body>
</html>

Output:

We have created a list where we have set list-style-type to decimal-leading-zero (01.,02.,03.,…) and list-style-position to inside.

Example 2:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
      <title>Document</title>
   </head>
   <style>
      ul {
      color: blueviolet;
      list-style-image: none;
      }  
   </style>
   
   <body>
      <h2> Welcome to IncludeHelp!</h2>
      <p> Elements of website design-</p>
      <ul>
         <li>Navigation</li>
         <li>Content</li>
         <li>Visual design</li>
      </ul>
   </body>
</html>

Output:

As you can see in this code, I have used the same list as used in Example1 but the list-style property is changed. We have set the value of list-style-image to none. Therefore, no image is displayed as a marker. By default, it is set to disc.

CSS Tutorial & Examples »

The word-break Property in CSS

The padding-left Property in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples