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.
The list-style-image Property
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.
The list-style-position Property
The list-style-position property indicates whether the marker should appear inside or outside the list item.
It has the following values: inside, outside, initial, inherit.
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.
If you want to remove default setting, then simply use list-style-type: none property.
List Shorthand Property:
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.