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.

Example

Ordered lists

  ol.first{
      list-style-type: circle;  
    }
 ol.second{
      list-style-type: circle;  
    }

Unordered lists

   ul.thrid{
      list-style-type: circle;  
    }
    ul.forth{
      list-style-type:square;
    }


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

Example

  ol{
      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.

Example

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

    }


All CSS List Properties

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




Leave a comment
No Cmomments yet