CSS Lists

CSS Lists

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 –

  1. list-style-type – This sets the type of bullet points.
  2. list-style-position – This sets the position of the bullet points
  3. 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 TypeExample
decimal1,2,3,…
decimal-leading-zero01,02,03,…
lower-romanI, ii, iii,iv,…
upper-romanI, II, III,IV,…
lower-alphaa, b, c, …
upper-alphaA, B, C, D,…
lower-greekα, β, γ, δ, ε,…
CSS LISTS STYLE TYPE

The Syntax of list style type for ordered list:
list-style-type: decimal| decimal-leading-zero| lower-roman| upper-roman| lower-alpha| upper-alpha| lower-greek| hebrow ;

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 TypeExample
discA solid circle (default)
circleA circle with a hole (Empty Circle)
squareA solid square
noneNo 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 TypeExample
insideThe Item marker will be present inside the list items.This pushes the list items.
outsideThe 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’) ;

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.

Background color to the 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.

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;
}

Tutorials for all brains!