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|
The perfect solution for professionals who need to balance work, family, and career building.
More than 10 000 certificates already issued!
The HTML Certificate documents your knowledge of HTML.
The HTML5 Certificate documents your knowledge of advanced HTML5.
The CSS Certificate documents your knowledge of advanced CSS.
The jQuery Certificate documents your knowledge of jQuery.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
Your message has been sent to W3Schools.