CSS Lists

In this tutorial you will learn about the CSS Lists and its application with practical example.

HTML List Element used to display numbered or bulleted points on a web page, CSS List Properties helps us to control list type, position, style etc for the HTML List Elements.

List Element can be of two type:

Unordered lists – List items are presented with bullets.

Ordered lists – List items are presented with numbers or letters in a specific order.

Following is a list of basic five CSS properties for HTML List Element –

Property Description
list-style-type This property specifies the type of marker to be added to the HTML List Item. Possible Values – disc,circle,square,decimal,lower-roman etc.
list-style-position This property specifies the list-item markers will added inside or outside of the HTML List Item. Possible Values – inside,outside
list-style-image This property specifies an image as marker for the HTML List Item.
list-style This property specifies all the properties for HTML List Item in one declaration. This is know as shorthand property too.
marker-offset This property specifies space between marker and the HTML List Item content.

List Style Type

This property specifies the type of marker to be added to the HTML List Item.

Example Code:

Output:

  • List item one
  • List item two
  1. List item one
  2. List item two

List Style Position

This property specifies the list-item markers will added inside or outside of the HTML List Item. Possible Values.

Example Code:

Output:

  • List item one
  • List item two
  • List item one
  • List item two
  1. List item one
  2. List item two
  1. List item one
  2. List item two

List Style Image

This property specifies an image as marker for the HTML List Item.

Example Code:

Output:

  • List item one
  • List item two
  1. List item one
  2. List item two

List Style

This property specifies all the properties for HTML List Item in one declaration. This is know as shorthand property too.

Example Code:

Output:

  • List item one
  • List item two
  1. List item one
  2. List item two

Marker Offset

This property specifies space between marker and the HTML List Item content.

Example Code:

Output:

  • List item one
  • List item two
  1. List item one
  2. List item two

In this tutorial we have learn about the CSS Lists and its application with practical example. I hope you will like this tutorial.