CSS list-style property
The list-style property in CSS is a shorthand property used to define the appearance of list items in an ordered list (<ol>) or an unordered list (<ul>). It allows you to set multiple list-related properties in one line, simplifying the styling of list items.
Syntax
selector {
list-style: type position image;
}
selector: The element to which you want to apply the list styles.type: Defines the type of list item marker.position: Defines the position of the list item marker (only for unordered lists).image: Defines a custom image to use as the list item marker.
Properties
list-style-type:- Defines the type of marker for list items. This can be a disc, circle, square, decimal, etc.
- Values:
disc: A filled circle (default for unordered lists).circle: An empty circle.square: A filled square.decimal: Numbers (default for ordered lists).lower-alphaorlower-latin: Lowercase letters.upper-alphaorupper-latin: Uppercase letters.lower-roman: Lowercase Roman numerals.upper-roman: Uppercase Roman numerals.none: No marker is displayed.
list-style-position:- Defines the position of the list item marker relative to the content. This property is relevant for both ordered and unordered lists.
- Values:
inside: The marker is placed inside the content area of the list item, which means it will be part of the list item's box and may affect the text flow.outside: The marker is placed outside the content area of the list item, which means it will be positioned outside the list item's box, leaving the content unaffected.
list-style-image:- Defines a custom image to use as the marker for list items.
- Values:
url(image_url): The URL of the image to use as the marker.none: No image is used, and the default marker style is applied.
Examples
Basic Usage
ul {
list-style: square inside url('marker.png');
}
- This example uses a square marker, positions it inside the list item content area, and uses a custom image
marker.pngas the marker.
Using Individual Properties
ul {
list-style-type: disc;
list-style-position: outside;
list-style-image: url('custom-marker.png');
}
- This example applies a disc marker, positions it outside the content area, and uses
custom-marker.pngas the marker image.
HTML Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Style Example</title>
<style>
ul.default {
list-style: disc outside;
}
ul.custom {
list-style: square inside url('marker.png');
}
ol {
list-style: decimal outside;
}
</style>
</head>
<body>
<ul class="default">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class="custom">
<li>Custom Marker 1</li>
<li>Custom Marker 2</li>
<li>Custom Marker 3</li>
</ul>
<ol>
<li>Ordered Item 1</li>
<li>Ordered Item 2</li>
<li>Ordered Item 3</li>
</ol>
</body>
</html>
Explanation:
.defaultclass:- Applies a default disc marker positioned outside the content area.
.customclass:- Uses a square marker, positions it inside the content area, and uses
marker.pngas the custom marker image.
- Uses a square marker, positions it inside the content area, and uses
ol:- Uses decimal numbers for ordered lists, with the marker positioned outside the content area.
Important Points
Shorthand Property:
list-styleis a shorthand property forlist-style-type,list-style-position, andlist-style-image. You can use any combination of these properties in the shorthand.
Order of Values:
- When using the shorthand property, the order of values matters:
list-style-type, thenlist-style-position, and finallylist-style-image.
- When using the shorthand property, the order of values matters:
No Marker with
none:- Using
list-style-type: none;removes the marker entirely, but you can still uselist-style-imageif you want to add an image marker without a type.
- Using
Browser Compatibility:
- The
list-styleproperty and its components are well-supported across modern browsers.
- The