CSS Lists

The CSS list properties is used to allows you to set all the list properties:

  • Set different list item markers for ordered lists.
  • Set different list item markers for unordered lists.
  • Set an image as the list item marker

In HTML, there are two type of lists:

  • Unlorder lists: the list items are marked with bullets.
  • Order lists: the list items are marked with numbers or letters.

In CSS, lists can be styled further, and images can be used as the list marker. There are different list item markers with the list-style-type property.

The CSS properties to style the lists are given as follows:

list-style-type: CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.


Ordered lists

      list-style-type: circle;  
      list-style-type: circle;  

Unordered lists

      list-style-type: circle;  

list-style-image: CSS property to specify an image as the list item marker.


      list-style-image: url("image/logo.png");

list-style-position: It specifies the position of the marker.

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.

List-Shorthand property: All the list properties can be shortened by utilizing the list-style shorthand property which combines numerous properties into one property.


      list-style: square url('image/logo.jpg') none;


All CSS List Properties

Sets all the properties for a list in one declaration
Specifies an image as the list-item marker
Specifies the type of list-item marker
Specifies if the list-item markers should appear inside or outside the content flow

Leave a comment
No Cmomments yet