CSS Lists

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

 Run

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

Run

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