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:
