In this tutorial you will learn about the CSS Lists and its application with practical example.
HTML List Element used to display numbered or bulleted points on a web page, CSS List Properties helps us to control list type, position, style etc for the HTML List Elements.
List Element can be of two type:
Unordered lists – List items are presented with bullets.
Ordered lists – List items are presented with numbers or letters in a specific order.
Following is a list of basic five CSS properties for HTML List Element –
Property | Description |
---|---|
list-style-type | This property specifies the type of marker to be added to the HTML List Item. Possible Values – disc,circle,square,decimal,lower-roman etc. |
list-style-position | This property specifies the list-item markers will added inside or outside of the HTML List Item. Possible Values – inside,outside |
list-style-image | This property specifies an image as marker for the HTML List Item. |
list-style | This property specifies all the properties for HTML List Item in one declaration. This is know as shorthand property too. |
marker-offset | This property specifies space between marker and the HTML List Item content. |
List Style Type
This property specifies the type of marker to be added to the HTML List Item.
Example Code:
Output:
- List item one
- List item two
- List item one
- List item two
List Style Position
This property specifies the list-item markers will added inside or outside of the HTML List Item. Possible Values.
Example Code:
Output:
- List item one
- List item two
- List item one
- List item two
- List item one
- List item two
- List item one
- List item two
List Style Image
This property specifies an image as marker for the HTML List Item.
Example Code:
Output:
- List item one
- List item two
- List item one
- List item two
List Style
This property specifies all the properties for HTML List Item in one declaration. This is know as shorthand property too.
Example Code:
Output:
- List item one
- List item two
- List item one
- List item two
Marker Offset
This property specifies space between marker and the HTML List Item content.
Example Code:
Output:
- List item one
- List item two
- List item one
- List item two