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:
|
1 2 3 4 5 6 7 8 9 |
<ul style="list-style-type:circle;"> <li>List item one</li> <li>List item two</li> </ul> <ol style="list-style-type:decimal;"> <li>List item one</li> <li>List item two</li> </ol> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ul style="list-style-type:circle; list-stlye-position:outside;"> <li>List item one</li> <li>List item two</li> </ul> <ul style="list-style-type:square;list-style-position:inside;"> <li>List item one</li> <li>List item two</li> </ul> <ol style="list-style-type:decimal;list-stlye-position:outside;"> <li>List item one</li> <li>List item two</li> </ol> <ol style="list-style-type:lower-alpha;list-style-position:inside;"> <li>List item one</li> <li>List item two</li> </ol> |
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:
|
1 2 3 4 5 6 7 8 9 |
<ul style="list-style-image: url(images/arrow.gif);"> <li>List item one</li> <li>List item two</li> </ul> <ol style="list-style-image: url(images/arrow.gif);"> <li>List item one</li> <li>List item two</li> </ol> |
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:
|
1 2 3 4 5 6 7 8 |
<ul style="list-style: inside square;"> <li>List item one</li> <li>List item two</li> </ul> <ol style="list-style: outside upper-alpha;"> <li>List item one</li> <li>List item two</li> </ol> |
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:
|
1 2 3 4 5 6 7 8 9 |
<ul style="list-style: inside square; marker-offset:2em;"> <li>List item one</li> <li>List item two</li> </ul> <ol style="list-style: outside upper-alpha; marker-offset:2cm;"> <li>List item one</li> <li>List item two</li> </ol> |
Output:
- List item one
- List item two
- List item one
- List item two
