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 NoMarkerDescriptionExample
1discShow list style value disc this is default valueRun
2armenianShow list style value armenianRun
3circleShow list style value circleRun
4cjk-ideographicShow list style value cjk-ideographicRun
5decimalShow list style value discRun
6decimal-leading-zeroShow list style value decimal with leading zeroRun
7georgianShow list style value gorgianRun
8hebrewShow list style value hebrewRun
9hiraganaShow list style value hiraganaRun
10hiragana-irohaShow list style value=e hiragana-irohaRun
11katakanaShow list style value katakanaRun
12katakana-irohaShow list style value katakana-irohaRun
13lower-greekShow list style value lower-greekRun
14lower-latinShow list style value lower-latinRun
15lower-romanShow list style value lower-romanRun
16noneDont show any list style valueRun
17squareShow list style as squareRun
18upper-alphaShow list style value upper-alpha<Run
19upper-greekShow list style value upper-greekRun
20upper-latinShow list style upper-latinRun
21upper-romanShow list style value upper-romanRun
22initialShow list style initial valueRun
23inheritShow list style value inherit from parentRun

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.


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


This is the short hand property for list styling in CSS. The order of values is:



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

changing color margin padding and selecting specific element in css