CSS list style

CSS list style

Mishel Shaji
Mishel Shaji

The CSS list-style property is the shorthand property for list-style-type, list-style-position, and list-style-image.


list-style: list-style-type list-style-position list-style-image;

It is not a must to specify all three list-style properties.

/* Only list-style-type */

/* list-style-type and list-style-position */
list-style:disc inside;

/* list-style-type, list-style-position and list-style-image */
list-style:none outside url('../img/shape.png');


<!DOCTYPE html>
        ul{list-style: square inside }
    <h4>The list-style property</h4>
        <li>Coca Cola</li>

Definition and Usage

The list-style property is generally specified in the following order

  • list-style-type
  • list-style-position
  • list-style-image

Although this is the formal syntax, you can specify the values in any order.

/* list-styke-position and list-style-type */ 
list-style: inside disc;