The CSS list properties allow you to:
In HTML, there are two types of lists:
With CSS, lists can be styled further, and images can be used as the list item marker.
The type of list item marker is specified with the list-style-type property:
Some of the values are for unordered lists, and some for ordered lists.
To specify an image as the list item marker, use the list-style-image property:
The example above does not display equally in all browsers. IE and Opera will display the image-marker a little bit higher than Firefox, Chrome, and Safari.
If you want the image-marker to be placed equally in all browsers, a crossbrowser solution is explained below.
The following example displays the image-marker equally in all browsers:
Example explained:
The list-style property is a shorthand property. It is used to set all the list properties in one declaration:
When using the shorthand property, the order of the property values are:
If one of the property values above are missing, the default value for the missing property will be inserted, if any.
All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies if the list-item markers should appear inside or outside the content flow |
| list-style-type | Specifies the type of list-item marker |
Your message has been sent to W3Schools.