What are lists? And Types of Lists

List are used to display specific list of information. We can have numbered list, bulleted list , reveresed lists and even you can style lists.

Ordered List
Unordered List
Definition Lists

Lets learn more about type of lists.

Ordered Lists:
Used to create a list of related items, in a specific order. ol tag is used to create ordered list and li is used to represent items in list, as shown in example.

The numbering of items in an ordered list typically starts with 1. However, if you want to change that you can use the start attribute, as shown in the following example:

Unordered Lists:
Used to create a list of related items, in a no particular order. ul tag is used to create unordered list and li is used to represent items in list, as shown in example.

Description Lists:
Description lists use one set of dl tags wrapped around one or more groups of dt name and dd value tags. You must pair at least one dt with at least one dd, and the dd should always come first in the source order, as shown in example.

styling lists

list-style property is sets values for three different list-related properties, as shown in example.

1. Values for list-style-type

   The list-style-type property defines the type of list. Keyword values for list-style-type include:

   • by default
   • disc
   • circle
   • square
   • decimal
   • decimal-leading-zero
   • lower-roman
   • upper-roman
   • lower-greek
   • lower-latin
   • upper-latin
   • armenian
   • georgian
   • lower-alpha
   • upper-alpha
   • none
   • Custom

2. Values for list-style-position

   The list-style-position property specifies the position of the list-item bullet points.
   list-style-position: outside; means that the bullet points will be outside the list item.
   list-style-position: inside; means that the bullet points will be inside the list item. As it is part of the list item.

   • List Style Position Outside
   • List Style Position Inside

3. Values for list-style-image

   The list-style-image property determines whether the list marker is set with an image, and accepts a value of none or a URL that points to the image.

   • List-style-image