CSS List

There are two types of Lists in HTML.

  1. Ordered List
  2. Unordered List

An HTML List consist of two parts. The first part is a container element. Which we represent in HTML tag < ol > for ordered list and < ul > tag for unordered list. The second part is the line item element that we represent in HTML using < li > tag. There is no limitation of maximum number of < li > element in a list.

Sample List

output

  • Red
  • Blue
  • Green
  • Yellow

Change List Bullet Style

CSS list-style-type is using change the style of List Bullet. If we want to change the Bullet style to square shape - list-style-type: square;

Source Code

output

  • Red
  • Blue
  • Green
  • Yellow

If you don't want any bullet in your list then set list-style-type: none;

output

  • Red
  • Blue
  • Green
  • Yellow

The following values you can set in list-style-type property in CSS.

CSS list style type

Change the color of a list bullet

output

  • Red
  • Blue
  • Green
  • Yellow

Create list style dash or custom characters

output

  • Red
  • Blue
  • Green
  • Yellow

You can change any character instead of "-"

Change the size of List Bullet

  • Red
  • Blue
  • Green
  • Yellow

CSS list-style-image

You can add image as List bullets.

output

  • Red
  • Blue
  • Green
  • Yellow

Spacing between CSS List items

CSS padding property allows you to create spacing between List items.

output

  • Red
  • Blue
  • Green
  • Yellow

Add color to your CSS List

You can color < ul > elements as well as < li > elements.

output

  • Red
  • Blue
  • Green
  • Yellow

Display CSS list items as vertical columns

You can create CSS List vertical block using CSS display : block;

output

  • Red
  • Blue
  • Green
  • Yellow

CSS list Horizontal items

CSS display : inline; will create a horizontal list items.

output

  • Red
  • Blue
  • Green
  • Yellow