CSS Lists
There are two types of list in HTML. One is unordered list(ul) and another is ordered list(ol). By using CSS list properties you can control the lists.
Here are the CSS properties:
- list-style-type - Used to control the shape of the marker.
- list-style-image - Specifies an image as a marker instead of the default marker.
- list-style-position - Specifies where the marker should appear when a list item takes more than one line.
- list-style - The shorthand property for the previous list properties.
- marker-offset - Specifies the distance between the marker and the text in a list.
The list-style-type Property
This property is used to control the shape or appearance of the default marker. The values of the list-style-type property are given below for unordered list:
- none
- circle
- square
- disc
There are also values for unordered list. Some common values are given here:
- decimal
- lower-alpha
- upper-alpha
- lower-roman
- upper-roman
Example:
ul.circle
{
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
ol.decimal {
list-style-type: decimal;
}
ol.upper-roman {
list-style-type: upper-roman;
}
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
ol.decimal {
list-style-type: decimal;
}
ol.upper-roman {
list-style-type: upper-roman;
}
Run Example
The list-style-image Property
This property can use images as the marker instead of the default marker.
Example:
The list-style-position Property
This property indicates the position of the markers. The values of this property:
- inside
- outside
Example:
The list-style Property
This property is the short hand of the previous properties. It can declare the preceding properties in a single line. The order of this property is given below:
- list-style-type
- list-style-position
- list-style-image