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

Syntax

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:none;

/* 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');

Example

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

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;