CSS Lists

With HTML you can create two main types of list. First, the Unordered List is also called Bullet List. And the second Ordered List is also called the Number List.

CSS List Properties have been created to customize the HTML list. You can Customize List Style, Position, Color etc. according to the list properties of CSS.

Ordered Lists:

  1. 1.Papaya
  2. 2.Kiwi
  3. 3.Banana
  4. 4.Cherry
  5. 5.Pear
  6. 6.Boysenberry

Unordered Lists:

  • >Papaya
  • >Kiwi
  • >Banana
  • >Cherry
  • >Pear
  • >Boysenberry

CSS List Properties

According to the need to customize the HTML list, many properties are provided for customizing. Whose names are given below.

  • list-style-type
  • list-style-position
  • list-style-image
  • list-style

list-style-type Property

List-style-type Property by Define List of Bullets and Numbers in Style. This is also called List Style Marker. The type of marker depends on the type of Style List.

Unordered List can have four possible Values.

  • none – Marker gets removed from this value
  • disc – This is the Default Value of Value Unordered List. This is a filled shell. Such as a CD or DVD
  • circle – You can compare this style marker with a circle. Its texture looks something like this.
  • square – It takes a filled square as a List Marker.
ul.a {
  list-style-type: circle;
}

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

Similarly there are many Values ​​in the Order List too. Below we are just telling you about the more Values ​​used.

  • none – This removes all markers.
  • decimal – This value shows Show from Order List Numbers i.e. 1, 2, 3, 4. This marker is default in the Style Order List.
  • decimal-leading-zero – are valid only by the name of this value. In this marker style, there are 0 shows before the number. Like 01, 02, 03 etc.
  • lower-alpha – The value in Marker Style shows the Alphabets Characters. E.g., a, b, c, d etc.
  • upper-alpha – This value contains Capital Alphabets Show. E.g., A, B, C, D etc.
  • lower-roman – In this value there is a Style Marker Show in Roman Number. Which are small, which are displayed in lower size. E.g., i, ii, ii, iv etc.
  • upper-roman – This value contains Roman Number Capital Display. E.g., I, II, III, IV etc.
ol.c {
  list-style-type: upper-roman;
}

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

list-style-position Property

By this property you set the position of the List Markers. It has two potential Values.

  1. outside – If Marker’s Position is Outside Set, then there is a considerable distance between List Content and Marker. And the second line of text also starts from the bottom of the first line.
  2. inside – When the marker’s Position Inside is set, the marker gets indent in the first line and starts from the bottom of the second line marker.
ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

list-style-image Property

Through this property you can use an image for the List Marker. Which can make your List Content pretty attractive Syntax to use the image as a list marker is exactly the same as the Background Image Property.

ul {
  list-style-image: url('image.gif');
}

list-style Property

All List Styles can be Declare together by this property. This is called Shorthand Property.

When using List-style Property, List Properties have to Declare in the correct order. If you do not declare any property, then the property is then Declare.

The order of the list properties in the Shorthand Style Rule remains thus.

ul {
  list-style: square inside url("image.gif");
}

Styling List With Colors

ol {
  background: #ff9999;
  padding: 20px;
}

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

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

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