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:
It is also possible to specify all the list properties in one, single property. This is called a shorthand property.
The shorthand property used for lists, is the list-style property:
When using the shorthand property, the order of the values are:
It does not matter if one of the values above are missing, as long as the rest are in the specified order.
All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.
|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.