CSS List-Style Property

The list-style property is the shorthand for list-style-type, list-style-position, and list-style-image. The order of the values does not matter. Let's take a look at the following examples:

Example 1

CSS Declaration

ul {   list-style: url("circle.gif") none inside; }

The following HTML code,

<ul>   <li>First item   <li>Second item </ul>

renders

• First item
• Second item

In Example 1, three values are defined for list-style. This is equivalent to the following three CSS properties:

list-style-image: url("circle.gif"); list-style-type: none; list-style-position: inside;

Example 2

CSS Declaration

ol {   list-style: lower-latin; }

The following HTML code,

<ol>   <li>First item   <li>Second item </ol>

renders

1. First item
2. Second item

In Example 2, the only value entered is 'lower-latin,' which defines the style. This CSS declaration is equivalent to the following:

list-style-type: lower-latin;