CSS Lists
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.
Syntax:
list-style-type:value;
The following value can be used:
- 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: This example describes the CSS List with the various list-style-type where the values are set to square & lower-alpha.
HTML
<!DOCTYPE html> <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 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”.
Syntax:
list-style-image: url;
Example: This example describes the CSS List with the various list-style-image where the values are set to url of the image.
HTML
<!DOCTYPE html> <html> <head> <title> CSS list-style-image Property </title> <style> ul { list-style-image: url( } </style> </head> <body> <h1> GeeksforGeeks </h1> <p> Unordered lists </p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> |
Output:
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.
Syntax:
list-style-position: outside;
Example: This example describes the CSS List with the various list-style-position where the value is set to outside.
HTML
<!DOCTYPE html> <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> |
Output:
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.
Syntax:
list-style-position: inside;
Example: This example describes the CSS List with the various list-style-position where the value is set to inside.
HTML
<!DOCTYPE html> <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 properties is missing, the default value is inserted.
Example: This example describes the CSS List using the shorthand property.
HTML
<!DOCTYPE html> <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, 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.
HTML
<!DOCTYPE html> <html> <head> <style> ul.a { list-style: square; background: pink; 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 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.
HTML
<!DOCTYPE html> <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:
Supported Browsers:
- Google Chrome 95.0
- Microsoft Edge 95.0
- Firefox 93.0
- Internet Explorer 11.0
- Opera 80.0
- Safari 15.0
Please Login to comment...