Two types of list exist in CSS i.e. Unordered lists and Ordered Lists
- UNORDERED LISTS
In unordered lists, the list items are marked with bullets. - ORDERED LISTS
In ordered lists, the list items are marked with numbers and alphabet.
List Item Marker: This property specifies the type of item marker i.e. unordered list or ordered
Syntax:
list-style-type:value;
Now, the value can be following:
- circle
- decimal , eg :1,2,3,etc
- decimal-leading-zeroes , eg :01,02,03,04,etc
- lower-roman
- upper-roman
- lower-alpha, eg : a,b,c,etc
- upper-alpha, eg : A,B,C,etc
- square
Example:
<!DOCTYPE> < html > < head > < style > ul.a { list-style-type:square; } ol.c { list-style-type:lower-alpha; } </ style > </ head > < body > < h2 > GEEKSFORGEEKS </ h2 > < p > Unordered lists </ p > < ul class = "a" > < li >one</ li > < li >two</ li > < li >three</ li > </ ul > < ul class = "b" > < li >one</ li > < li >two</ li > < li >three</ li > </ ul > < p > Ordered Lists </ p > < ol class = "c" > < li >one</ li > < li >two</ li > < li >three</ li > </ ol > < ol class = "d" > < li >one</ li > < li >two</ li > < li >three</ li > </ ol > </ body > </ html > |
OUTPUT:![]()
Image as List Marker: This property specifies for the image as list item marker.
Example:
<!DOCTYPE> < html > < head > < style > ul.a { list-style-image:url(d.jpg); } </ style > </ head > < body > < h2 > GEEKSFORGEEKS </ h2 > < p > Unordered lists </ p > < ul class = "a" > < li >one</ li > < li >two</ li > < li >three</ li > </ ul > </ body > </ html > |
OUTPUT:![]()
List Marker Position: This property specifies the position of the list item marker. There are 2 types of position marker:
1. 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:
<!DOCTYPE> < html > < head > < style > ul.a { list-style-position:outside; } </ style > </ head > < body > < h2 > GEEKSFORGEEKS </ h2 > < p > Unordered lists </ p > < ul class = "a" > < li >one < br >In this the bullet points will be outside the list item.</ li > < li >two< br > The start of each line of the list will be aligned vertically. </ li > < li >three</ li > </ ul > </ body > </ html > COPY TO |
OUTPUT:![]()
2. 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:
<!DOCTYPE> < html > < head > < style > ul.a { list-style-position:inside; } </ style > </ head > < body > < h2 > GEEKSFORGEEKS </ h2 > < p > Unordered lists </ p > < ul class = "a" > < li >one < br >In this the bullet points will be inside the list item.</ li > < li >two< br > The line along with the bullet points will be aligned vertically.. </ li > < li >three</ li > </ ul > </ body > </ html > |
OUTPUT:![]()
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 property is missing, the default value is inserted.
Example:
<!DOCTYPE> < html > < head > < style > ul.a { list-style:square inside; } </ style > </ head > < body > < h2 > GEEKSFORGEEKS </ h2 > < p > Unordered lists </ p > < ul class = "a" > < li >one</ li > < li >two</ li > < li >three</ li > </ ul > </ body > </ html > |
OUTPUT:![]()
Styling Lists:
The list can be formatted in CSS. Different colors, borders, background, and paddings can be set for the lists.
Example:
<!DOCTYPE> < html > < head > < style > ul.a { list-style:square; background:hotpink; padding:20px; } </ style > </ head > < body > < h2 > GEEKSFORGEEKS </ h2 > < p > Unordered lists </ p > < ul class = "a" > < li >one</ li > < li >two</ li > < li >three</ li > </ ul > </ body > </ html > |
OUTPUT:![]()
NESTED LISTS:
Lists can also be nested. We have sub-sections for sections, so we need nesting of lists.
Example:
<!DOCTYPE> < html > < head ></ head > < body > < h2 > GEEKSFORGEEKS </ h2 > < ul > < li > one < ul > < li >sub one</ li > < li >sub two</ li > </ ul > </ li > < li > two < ul > < li >sub one</ li > < li >sub two</ li > </ ul > </ li > < li > three < ul > < li >sub one</ li > < li >sub two</ li > </ ul > </ li > </ ul > </ body > </ html > |
OUTPUT:![]()