What are different properties of lists in CSS?

Web Development
,
#1

In HTML, there are two main types of lists:

unordered lists (<ul>) - the list items are marked with bullets. In Unordered lists (<ul></ul>), the order of the list items does not matter. The items appear in bullet format. The default marker for unordered lists is around bullet point or disc.

ordered lists (<ol>) - the list items are marked with numbers or letters. In Ordered lists (<ol></ol>), the order of the list items is important. The items may appear in order by number, roman numeral, alpha numeral, or another type of marker. The default marker for ordered lists is a number (or decimal):

The CSS list properties allow you to:

  • Set different list item markers for ordered lists
  • Set different list item markers for unordered lists
  • Set an image as the list item marker
  • Add background colors to lists and list items

There are three common properties specific to styling lists:

list-style-type:

The markers (or bullet points) that appear in ordered and unordered lists can be styled in a variety of ways. The CSS property for styling the marker type is list-style-type. The default list-style-type value for an ordered list is decimal, whereas the default for an unordered list is disc.

list-style-position:

list-style-position controls whether the list marker appears inside or outside of each list item element (<li></li>). The property accepts two values, outside (default) or inside.

list-style-image:

The list-style-image property accepts an image URL in place of the list marker. The default value for this property is none.