CSS List

In this tutorial you will learn about Cascading Style Sheets (CSS) List, List style type, List style position, List style image and Using the shortcut.

List style type

To set the list style marker type, use the property “list-style-type”, this property can have on of the following values:

none, circle, disc, square, decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, lower-roman, upper-roman, armenian, cjk-ideographic, georgian, hebrew, hiragana, hiragana-iroha, katakana, or katakana-iroha.

Example:

< ul style="list-style-type: disc;" >Fruits:
< li >Apples< /li >
< li >Bananas< /li >
< /ul >

This will be presented as follows:

Fruits:
• Apples
• Bananas

List style position

To set the position of the list item marker, use the property “list-style-position”, the value that can be assigned to this property may be on of the following:

inside or outside.

Example:

< ul style="list-style-type: disc; list-style-position: inside ;" >Fruits:
< li >Apples< /li >
< li >Bananas< /li >
< /ul >

This will be presented as follows:

Fruits:
• Apples
• Bananas

List style image

To use a custom image as a list style marker, use this property “list-style-image”, the value of this property is a URL.

Example:

< ul style="list-style-image: list_image.jpg" > Fruits:
< li >Apples< /li >
< li >Bananas< /li >
< /ul >

This sets the image “list_image.jpg” as the marker for this list style.

Using the shortcut

A shortcut property can be used to set all the properties of the list style in one declaration, the property is “list-style”, and the order is:

padding-top, then padding-right, then padding-bottom, and finally padding-left.
list-style-type, then list-style-position, and finally list-style-image.

Example:

ul
{
list-style: disc inside url(“list_image.jpg”)
}

This sets the marker style to disk, the position to be inside, and overrides the marker to be the mage “list_image.jpg” instead of disc.