tutorialstonight logo
A Platform To Learn To Code

CSS LISTS



List is an effective way to present similarly related data.

List can be ordered or unordered. Ordered list shows list contents using numbers while unordered list shows list content using bullets.

In CSS we have following list properties to style list:

  1. CSS list-style-type This allows the user to change the shape of bullets or markers.
  2. CSS list-style-position Control content to be inside or outside of the bullet.
  3. CSS list-style-image This property replaces marker/bullet with specified image.
  4. CSS list-style This property let us use multiple list property at once.



1.)CSS list style type

The list-style-type property allows us to change the bullet(marker) model.

In unordered list bullets can be made in square,circle and disc.

Example

Run the code

The ordered list marker can be made in number,lower alphabet,upper alphabet,roman etc.

Example

Run the code

2.) CSS list style position

The list-style-position property specifies whether the content of the list will be inside or outside of the bullet.

Example

Run the code

3.) An image as bullet (list-style-image)

The list-style-image property can be used to replace general bullets with an image.

Example

Run the code

4.) CSS list shorthand (list-style)

The list-style property lets us use all list properties at once like - list-style-type,list-style-position and list-style-image.

Example

Run the code

In list-style property if somehow the image is unable to load then the bullet will replace the image.