Lists can be used for simple tasks such as creating an ordered listing of items, or for fully-featured navigation bars. CSS allows you to set different list item markers for ordered lists and unordered lists, as well as an image as the list item marker.
Lists
In HTML, there are two main types of lists.
Unordered lists – the list items are marked with bulletsOrdered lists – the list items are marked with numbers or letters
List-style Property (Shorthand)
With CSS, we can use the shorthand list-style property. The list-style property sets three values: list-style-type, list style-position, and list-style-image. Not all three values are required.
List-style-type
While the list-style-type property is supported by most modern browsers, not all of the property values listed below may be supported.
List-style-position
The list-style-position property simply specifies if the list-item markers should appear inside or outside the content flow. Values are as follows: inside, outside, or inherit.
List-style-image
The list-style-image property specifies that the list-item marker use an image. You may want to specify the list-style type property in addition to the list-style-image property. The list-style-type property will be used if the image is not available. Here is an example of the list-style-image property.
