CSS List Example

Unordered Lists:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

Ordered Lists:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

Different List Items are

This CSS property list-style-type specifies the type of list item marker.

Example:-

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

Test it Now

An Image List Item

This CSS property list-style-image specifies an image as the list item marker

Example:-

ul {
  list-style-image: url('images/logo/icon_bullet.png');
}

Test it Now

Remove Default Settings or Remove bullets, margin and padding

This property list-style-type:none can also be used to remove the bullets/markers.

Example:-

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Test it Now

Colors With List Style

Example:-

  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}

Test it Now

Next TopicCSS Table

← prev next →

CSS Tutorials

CSS Properties

CSS List Example

Unordered Lists:

Ordered Lists:

Different List Items are

An Image List Item

Remove Default Settings or Remove bullets, margin and padding

Colors With List Style