CSS Properties

List Properties

List property is used to create list. There are two type of lists:

1. Unorder List - An unordered list uses bullets as the list item markers.
2. Ordered List - An ordered list uses numbers or letters as the list item markers.

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

It allows us to change the default list type of marker to any other type such as square, circle, disc, upper-alpha, lower-alpha, decimal, decimal-leading-zero, lower-roman, upper-roman.

Example:

ul{
list-style-type : circle;
}
ol{
list-style-type : lower-alpha;
}

list-style-image

In this an image is used as the list item marker. We can set this property to none or web address of an image.

Example:

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

list-style-position

It specifies the position of the list item marker. You can set this property to either inside or outside.

Example:

ul{
list-style-position : inside;
}

list-style

It ia a shorthand property for list-style-type, list-style-image and list-style-position.

Example:

ul{
list-style : square inside;
}

Order: list-style-type, list-style-image, list-style-position.

Cristle Academy

Compiler