CSS Lists

There are 2 important types of CSS lists.

ol – Ordered List – The lists which follows a sequence/order like numbers, alphabets
ul – Unordered List

There are 3 important style properties for Ordered List and Unordered List –

list-style-type – This sets the type of bullet points.
list-style-position – This sets the position of the bullet points
list-style-image – This sets a background image for the bullet list type

1. CSS List Style Type

The list-style-type decides the shape of the bullet list which is called the Item marker.

For Ordered list, the default style type is decimal.

Style Type	Example
decimal	1,2,3,…
decimal-leading-zero	01,02,03,…
lower-roman	I, ii, iii,iv,…
upper-roman	I, II, III,IV,…
lower-alpha	a, b, c, …
upper-alpha	A, B, C, D,…
lower-greek	α, β, γ, δ, ε,…

Example of list style type for ordered list

#ol-d {
  list-style-type: decimal;
}
#ol-d-l-z {
  list-style-type: decimal-leading-zero;
}
#ol-lr {
  list-style-type: lower-roman;
}
#ol-ur {
  list-style-type: upper-roman;
}	  
#ol-la {
  list-style-type: lower-alpha;
}
#ol-ua {
  list-style-type: upper-alpha;
}
#ol-lg {
  list-style-type: lower-greek;
}

For Unordered list, the default style type is disc.

Style Type	Example
disc	A solid circle (default)
circle	A circle with a hole (Empty Circle)
square	A solid square
none	No style -Use this to remove any style

The Syntax of list style type for unordered list:
list-style-type: disc| circle| square| none ;

Example of list style type for Unordered list

#ul-disc {
  list-style-type: disc;
}
#ul-circle {
  list-style-type: circle;
}
#ul-square {
  list-style-type: square;
}

It is very important to note list-style-type: none and coding this is very important for Navigation bars.

At this stage, we are just showing how the output will look like if we code this. You will see the practical application of list-style-type: none in the Navigation bars article.

Remove the style from list using list-style-type:none

#ul-none {
  list-style-type: none;
}

Along with list-style-type:none, if you code the float:left property, then it helps to create a Horizontal Navigation bar.

At this stage, we are just showing, how the output will look like if we code this. You will see the practical application of this in the Navigation bars.

Remove style by list-style-type: none and add float:left

#ul-none-fl {
  list-style-type: none;
}
#ul-none-fl li {
  border:1px solid orange;
  float:left;		
}

2. List style position

The list-style-position decides the position of the bullet list.

This takes the position in reference to the list item and can take any one of these 2 values –

Style Type	Example
inside	The Item marker will be present inside the list items.This pushes the list items.
outside	The Item marker will be present outside the list items. This does not push the list items. (This is the default value).

The Syntax of list style position:
list-style-position: inside| outside;

Example of list style position

#list-style-inside {
  list-style-position: inside;
}
#list-style-outside {
  list-style-position: outside;
}

3. Style List Image

You can set a background image(Icons) in place of the item marker using the list-style-image property

The Syntax Style list image:
list-style-image: url(‘path’) ;

Warning/Danger/Info/Success Ideally, the size of the image should be very small. The image size should be between 16*16px - 30*30px for the images to look good as item marker. This is not a standard rule but we recommend it based on our experience.

Example of Style list image

#ul-type-image-circle {
  list-style-image: url('list-type-image-circle.png');
}

Adding Background-color to the list

Let us try to add the background color to the list and see how beautiful you can make your list.

Example to code background color to list

#ul-bgcolor {
  list-style-image: url('list-type-image-eyes-icons.png');
  background-color:blue;
}
#ul-bgcolor li {
  background-color:orange;
  font-size:24px;
}

Shorthand list property

The list-style is the shorthand for list-style-type, list-style-position, list-style-image.

Using this shorthand property, you can combine the individual properties into one.

Note/Info/Success The position of list-style-type, list-style-position or list-style-image does not matter in the shorthand list-style property.

The Syntax of shorthand list property:
list-style: list-style-type list-style-position list-style-image;

All these individual styles in the shorthand list property is optional.

Example of the shorthand list property

#ul-bgcolor {
  list-style-image: url('list-type-image-eyes-icons.png');
  background-color:blue;
}
#ul-bgcolor li {
  background-color:orange;
  font-size:24px;
}