We already discuss the lists in HTML, now in this CSS tutorial, we see the how to style these lists.
The following are two types of lists.
Unordered lists: By using this, you can mark list items with bullets.
Ordered lists: By using this, you can mark list items with numbers and alphabet.
In this CSS tutorial, now you can style these list items with the help of CSS. You can set or change the list-style by using the properties list-style-type, list-style-image, and list-style-position.
This list-style is a shorthand property for setting the individual list properties i.e. list-style-type, list-style-position, and list-style-image in a single declaration.
The list-style-type Property
The list-style-type property is used to set or change the shape or style of the marker in case of unordered lists and change the style of numbering character in ordered lists.
It has the following values: circle, decimal, decimal-leading-zeroes, lower-roman, upper-roman, lower-alpha, upper-alpha, square, etc.
By using list-style-image property, set an image as a list-item marker. This property is declared the same as background-image property with letter URL staring at the value of the property followed by the URL in brackets. If the image does not found then default bullets are used.
Also, you can be added anything to the <ul> or <ol> tag which affects the entire list. Here we can style lists with background-color to make them look more interesting.
The list-style property is shorthand property which allows to define all the list properties at once.
The order of property is a list-style-type, list-style-position, and list-style-image. If any of the property is missing then the default value is inserted.
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok