CSS List Properties

These properties allow to control the presentation of list item markers. This property specifies the type of list marker for an item in a list - an element whose display property has the value list-item.
The list style type only applies if list-style-image is set to none, or to a URI that can’t be displayed.
List markers can either be glyphs (that is, bullets), or comprise a numeric or alphabetic numbering system. The CSS2.1 specification doesn't define how alphabetic numbering wraps at the end of the alphabet sequence.

Click here to know more about HTML List.

Example

ul li{
list-style-type: circle;
}

The following CSS properties are used to control list style:

• 1. list-style-type is used to control the shape or appearance.
• 2. list-style-position is used to set position of the text.
• 3. list-style-image is used to display image in place of bullet or number.
• 4. list-style is used to assign multiple style in one.
• 5. marker-offset is used to define distance between the text and the list.

List with square bullets

li { list-style-type: square; }

List with circle bullets

li { list-style-type: circle; }

List with image bullets

ul { list-style-image: url(path to image); }

background images for bullets

li{ 
  padding-left: 10px;
  background-image: url(path to image);
  background-repeat: no-repeat;
  background-position: 10px; 
}

List marker-offset Property

li { marker-offset:20px; }

List list-style Property

ul { list-style: inside square; }

Numbered/Ordered List

ol { list-style-type: decimal; }

Values for an ordered list