The List in CSS specifies the listing of the contents or items in a particular manner i.e., it can either be organized orderly or unorder way, which helps to make a clean webpage. It can be used to arrange the huge with a variety of content as they are flexible and easy to manage. The default style for the list is borderless. The list can be categorized into 2 types:
- Unordered List: In unordered lists, the list items are marked with bullets i.e small black circles by default.
- Ordered List: In ordered lists, the list items are marked with numbers and an alphabet.
List Item Marker: This property specifies the type of item marker i.e. unordered list or ordered. The list-style-type property specifies the appearance of the list item marker (such as a disc, character, or custom counter style) of a list item element. Its default value is a disc.
The following value can be used:
- decimal , eg :1,2,3,etc
- decimal-leading-zeroes , eg :01,02,03,04,etc
- lower-alpha, eg : a,b,c,etc
- upper-alpha, eg : A,B,C,etc
Example: This example describes the CSS List with the various list-style-type where the values are set to square & lower-alpha.
Image as List Marker: This property specifies the image as a list item marker. The list-style-image property is used to sets an image to be used as the list item marker. Its default value is “none”.
Example: This example describes the CSS List with the various list-style-image where the values are set to url of the image.
List Marker Position: This property specifies the position of the list item marker. The list-style-position property is used to sets the position of the marker relative to a list item. Its default value is “outside”.
There are 2 types of position markers:
- list-style-position: outside; In this, the bullet points will be outside the list item. The start of each line of the list will be aligned vertically.
Example: This example describes the CSS List with the various list-style-position where the value is set to outside.
list-style-position: inside; In this, the bullet points will be inside the list. The line along with the bullet points will be aligned vertically.
Example: This example describes the CSS List with the various list-style-position where the value is set to inside.
Shorthand Property: This property allows us to set all the list properties in one command. The order of property is a type, position, and image. If any of the properties is missing, the default value is inserted.
Example: This example describes the CSS List using the shorthand property.
Styling Lists: The list can be formatted in CSS. Different colors, borders, backgrounds, and paddings can be set for the lists.
Example: This example describes the CSS List where the various styling properties are applied to the element.
Nested List: Lists can also be nested. We have sub-sections for sections, so we need the nesting of lists.
Example: This example describes the CSS List having a list declared inside another list.
- Google Chrome 95.0
- Microsoft Edge 95.0
- Firefox 93.0
- Internet Explorer 11.0
- Opera 80.0
- Safari 15.0