By /

CSS List Style Property

The CSS list style property is used to control the appearance of list items (<li>) within ordered (<ol>) and unordered (<ul>) lists. It allows you to customize the marker (bullet or number) and its position.

  • 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.