CSS - list-style Property

Quiz

CSS list-style property is a shorthand property which is used to set all the list style properties list-style-type, list-style-position and list-style-image in a single declaration. Default values of those properties will be used which are not provided in the declaration.

Syntax

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

Property Values

Value	Description
list-style-type	It specifies the type of the marker for the list-item. Default is "disc".
list-style-position	It specifies the position of the marker for the list-item. Default is "outside".
list-style-image	It specifies the image to be used as marker for the list-item. Default is "none".
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS List Style Property

The following examples explain the list-style property with different values.

Defining All Values of List Style Property

To define the list-style-type, list-style-position and list-style-image in one single statement, we use the list-style property. The property sets values all the three properties. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      ul {
         border: 3px solid gray;
         width: 50%;
      }

      li {
         padding: 10px;
         font-weight: bold;
         font-size: 25px;
      }

      .front-end {
         color: blue;
         list-style: square outside 
                     url("/css/images/cursor-zoom-in.png");

      }

      .back-end {
         color: green;
         list-style: lower-alpha inside none;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style property
   </h2>
   <h4>
      list-style: square outside url(image_url)
   </h4>
   <div>
      <p>
         Front-end technologies:
      </p>
      <ul class="front-end">
         <li>
            HTML
         </li>
         <li>
            CSS
         </li>
         <li>
            JAVASCRIPT
         </li>
      </ul>
   </div>
   <h4>
      list-style: lower-alpha inside none
   </h4>
   <div>
      <p>
         Back-end technologies:
      </p>
      <ul class="back-end">
         <li>
            NODEJS
         </li>
         <li>
            MYSQL
         </li>
         <li>
            MONGODB
         </li>
      </ul>
   </div>

</body>

</html>

Constituent Properties of List Style Property

The list-style property is a shorthand for the properties: list-style-type, list-style-position and list-style-image. These properties can be used in combination to produce same effect produced by the list-style property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      ul {
         border: 3px solid gray;
         width: 50%;
      }

      li {
         padding: 10px;
         font-weight: bold;
         font-size: 25px;
      }

      .fruits {
         color: red;
         list-style-type: square;
         list-style-position: inside;
         list-style-image: url("/css/images/cursor-alias.png");

      }
   </style>
</head>

<body>
   <h2>
      CSS list-style property
   </h2>
   <h4>
      list-style-type: square
   </h4>
   <h4>
      list-style-position: inside
   </h4>
   <h4>
      list-style-image: url(image_url)
   </h4>
   <div>
      <ul class="fruits">
         <li>
            Apple
         </li>
         <li>
            Banana
         </li>
         <li>
            Cranberries
         </li>
         <li>
            Dragon Fruit
         </li>
      </ul>
   </div>
</body>

</html>

Supported Browsers

Property
list-style	1.0	4.0	1.0	1.0	7.0

css_reference.htm

Print Page