The concept of ordered and unordered lists in HTML is pretty much known to us. The unordered lists are marked by bullets while the other ones are ordered by numerical or alphabetical markers.
CSS styles the lists by:
Setting the list item markers for ordered (ol) and unordered (ul) lists
Setting images as list item markers
Adding background colors
List Item Markers (Non-Image)
The list item markers for ol and ul can be be set using the property list-style-type property. For ul you can give the values like square and circle while for ol you can give upper-roman and lower alpha. To avoid any kind of markers, you can set the value as none. Here’s a list of permissible values for ul and ol elements
| Sr No | Marker | Description | Example |
|---|---|---|---|
| 1 | disc | Show list style value disc this is default value | Run |
| 2 | armenian | Show list style value armenian | Run |
| 3 | circle | Show list style value circle | Run |
| 4 | cjk-ideographic | Show list style value cjk-ideographic | Run |
| 5 | decimal | Show list style value disc | Run |
| 6 | decimal-leading-zero | Show list style value decimal with leading zero | Run |
| 7 | georgian | Show list style value gorgian | Run |
| 8 | hebrew | Show list style value hebrew | Run |
| 9 | hiragana | Show list style value hiragana | Run |
| 10 | hiragana-iroha | Show list style value=e hiragana-iroha | Run |
| 11 | katakana | Show list style value katakana | Run |
| 12 | katakana-iroha | Show list style value katakana-iroha | Run |
| 13 | lower-greek | Show list style value lower-greek | Run |
| 14 | lower-latin | Show list style value lower-latin | Run |
| 15 | lower-roman | Show list style value lower-roman | Run |
| 16 | none | Dont show any list style value | Run |
| 17 | square | Show list style as square | Run |
| 18 | upper-alpha | Show list style value upper-alpha< | Run |
| 19 | upper-greek | Show list style value upper-greek | Run |
| 20 | upper-latin | Show list style upper-latin | Run |
| 21 | upper-roman | Show list style value upper-roman | Run |
| 22 | initial | Show list style initial value | Run |
| 23 | inherit | Show list style value inherit from parent | Run |
Image Item Markers
To put an image as the item marker, you can use the CSS property list-style-image. Here you can specify the path/url for the image and it will be used as item marker.
list-style-position
This property specifies the position of the list item markers. If the value given is inside, the markers will be within the list item (as a part of the text or the content area of the element boxs) and vice-versa.
List style position values are
inside | outside | inherit
list-style
This is the short hand property for list styling in CSS. The order of values is:
list-style-type>list-style-position>list-style-image
Here, both list-style-type and list-style-image are given. This is so that in case the image is not available, the browser will choose the item marker as per the list-style-type.
Background Color
Like any other element, you can set the background color, padding, margin etc for list items as well. This helps us to differentiate the lists from one to other.
Applying background color and setting margin of list
Run
changing color margin padding and selecting specific element in css
Run