CSS List Style Property

• Purpose:

  • To change the appearance of list markers.
  • It control the position of list markers.
  • To use custom images as list markers.

• Syntax:

To use custom images as list markers.

list-style: list-style-type list-style-position list-style-image;

• You can also use these individual properties:

  • list-style-type: Specifies the type of list marker.
  • list-style-position: Specifies the position of the list marker.
  • list-style-image: Specifies an image to use as the list marker.

• Values:

  1. list-style-type

     • Ordered Lists (<ol>):

       • decimal: Decimal numbers (1, 2, 3, …)
       • decimal-leading-zero: Decimal numbers with leading zeros (01, 02, 03, …)
       • lower-roman: Lowercase Roman numerals (i, ii, iii, …)
       • upper-roman: Uppercase Roman numerals (I, II, III, …)
       • lower-alpha: Lowercase letters (a, b, c, …)
       • upper-alpha: Uppercase letters (A, B, C, …)
       • lower-greek: Lowercase Greek letters (α, β, γ, …)

     • Unordered Lists (<ul>): 

       • disc: Filled circle (default)
       • circle: Hollow circle
       • square: Filled square
       • none: No marker

  2. list-style-position:

     • inside: Marker is placed inside the list item content.

     • outside: Marker is placed outside the list item content (default).

  3. list-style-image:

     • url(‘image.png’): Specifies the URL of an image to use as the marker.
     • none: No image is used. content.

• Example:

  • Changing List Marker Type:

ul {
  list-style-type: square;
}
ol {
  list-style-type: lower-roman;
}

• • Changing List Marker Position:

ul {
  list-style-position: inside;
}

• • Using an Image as a List Marker:

ul {
  list-style-image: url('bullet.png');
}

• • Shorthand Example:

ul {
  list-style: square inside url('bullet.png');
}

• • Removing List Markers:

ul, ol {
  list-style: none;
}

• Practical Applications:

  • Styling navigation menus.
  • Creating custom bullet points.
  • Enhancing the visual appearance of lists.
  • Creating unique list layouts.