CSS Styled HTML lists have become an invaluable tool in an HTML developer’s toolbox. This is mainly due to the fact that HTML lists are versatile and flexible in nature.
Lists can be used for simple tasks such as creating an ordered listing of items, or for fully-featured navigation bars. CSS allows you to set different list item markers for ordered lists and unordered lists, as well as an image as the list item marker.
Lists
In HTML, there are two main types of lists.
- Unordered lists – the list items are marked with bullets
- Ordered lists – the list items are marked with numbers or letters
List-style Property (Shorthand)
With CSS, we can use the shorthand list-style property. The list-style property sets three values: list-style-type, list style-position, and list-style-image. Not all three values are required.
ul {
list-style: circle inside;
}List-style-type
While the list-style-type property is supported by most modern browsers, not all of the property values listed below may be supported.
| Value | Description |
|---|---|
armenian | Armenian numbering |
circle | Circle |
cjk-ideographic | Ideographic numbers |
decimal | Number |
decimal-leading-zero | Number with leading zero |
disc | Filled circle. |
georgian | Georgian numbering |
hebrew | Hebrew numbering |
hiragana | Hiragana numbering |
hiragana-iroha | Hiragana iroha numbering |
inherit | Inherited from parent element |
katakana | Katakana numbering |
katakana-iroha | Katakana iroha numbering |
lower-alpha | Lower-alpha |
lower-greek | Lower-greek |
lower-latin | Lower-latin |
lower-roman | Lower-roman |
none | No marker |
square | Square |
upper-alpha | Upper-alpha |
upper-latin | Upper-latin |
upper-roman | Upper-roman |
List-style-position
The list-style-position property simply specifies if the list-item markers should appear inside or outside the content flow. Values are as follows: inside, outside, or inherit.
List-style-image
The list-style-image property specifies that the list-item marker use an image. You may want to specify the list-style type property in addition to the list-style-image property. The list-style-type property will be used if the image is not available. Here is an example of the list-style-image property.
ul {
list-style-image: url('marker.gif');
}
