CSS list-style Property

CSS list-style property is a shorthand property with the help of which we can set all the list-style properties (list-style-image, list-style-position, list-style-type) at once.

You can set all the properties with this order: 1- list-style-type, 2- list-style-position, 3- list-style-image.

The list-style property can be set on a list item or on the list of items (<ul> or <ol>) and that style will cascade and be applied to the list items in that list.

If there is a missing among the properties above, it will set it automatically to the default.

Initial Value disc outside none
Applies to List items.
Inherited Yes.
Animatable No.
Version CSS1
DOM Syntax object.style.listStyle = "none";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example1{
      list-style: circle;
      }
      .example2{
      list-style: square inside;
      }
    </style>
  </head>
  <body>
    List 1
    <ul class="example1">
      <li>List Item1</li>
      <li>List Item2</li>
      <li>List Item3</li>
    </ul>
    List 2
    <ul class="example2">
      <li>List Item A</li>
      <li>List Item B</li>
      <li>List Item C</li>
    </ul>
  </body>
</html>

Let’s try another example where the type of the list is specified.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul:nth-of-type(1) {
      list-style: lower-greek;
      }
      ul:nth-of-type(2) {
      list-style: lower-latin;
      }
    </style>
  </head>
  <body>
    <h2>List-style property example</h2>
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </body>
</html>

Another example where the position of the list is specified.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .inside { 
      list-style: inside; 
      }
      .outside { 
      list-style: outside; 
      }
      li { 
      border: 1px solid #ccc; 
      }
    </style>
  </head>
  <body>
    <h2>List-style property example</h2>
    <h3>List-style is positioned "inside":</h3>
    <ul class="inside">
      <li>Chocolate</li>
      <li>Candies</li>
      <li>Lollipops</li>
    </ul>
    <h3>List-style is positioned "outside":</h3>
    <ul class="outside">
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
  </body>
</html>

Another example where an image is set as the list style.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
      list-style: url('/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png');
      }
    </style>
  </head>
  <body>
    <h2>List-style property example</h2>
    <ul>
      <li>Chocolate</li>
      <li>Candies</li>
      <li>Lollipops</li>
    </ul>
  </body>
</html>

Values

Value Description
list-style-type Is used to define the type of the list-item marker. See more here: CSS list-style-type property
list-style-position Is used to define where the list item marker will be placed. See more here: CSS list-style-position property
list-style-image Is used to place an image instead of a list-item marker. See more here: CSS list-style-image property
initial Makes the property use its default value.
inherit Inherits the property from its parents element.





Related articles