🎯 CSS list-style Property

The CSS list-style property is a shorthand property used to define the appearance of list markers in a single declaration.

Instead of setting multiple list-related properties separately, you can combine them into one line of CSS. This makes your code cleaner, easier to read, and simpler to maintain.

The list-style shorthand can control:

• list-style-type → Defines the marker type
• list-style-position → Defines marker position
• list-style-image → Uses an image as the marker

When working with lists, you may need to customize marker styles, positions, and images at the same time. Writing separate properties works perfectly, but it increases the amount of CSS code.

The list-style shorthand allows you to configure all these settings in a single declaration.

Defines the type of marker displayed before each list item.

• disc
• circle
• square
• decimal
• lower-alpha
• upper-roman

ul {
    list-style-type: square;
}
                

Determines whether the marker appears inside or outside the content box.

ul {
    list-style-position: inside;
}
                

Common values:

• outside (default)
• inside

Replaces the default marker with a custom image.

ul {
    list-style-image: url("images/star.png");
}
                

Each list item will display the specified image instead of a standard bullet.

Instead of writing multiple properties:

ul {
    list-style-type: square;
    list-style-position: inside;
    list-style-image: url("images/star.png");
}
                

You can combine them into one declaration:

ul {
    list-style: square inside url("images/star.png");
}
                

The browser first tries to load the image. If the image cannot be loaded, it falls back to the specified marker type.

Resets the property to its default browser value.

list-style: initial;
                

Inherits the list-style value from the parent element.

list-style: inherit;
                

selector {
    list-style: list-style-type list-style-position list-style-image;
}