CSS list-style Property
Last Updated :
17 Apr, 2024
The list-style property in CSS is used to set the list style. This property is a shorthand notation for three distinct properties: list-style-type, list-style-position, and list-style-image. It’s designed to streamline your CSS and enhance the visual appeal of your lists. If any values are omitted, the property defaults to its initial state, ensuring your lists maintain a professional look.
Syntax:
list-style: list-style-type list-style-position list-style-image|initial|inherit;
Property Values:
|
list-style-type:
| This value sets the marker (such as a disc, character, or custom counter style) of a list item element. Its default value is a disc.
|
list-style-position
| This value sets the position of the marker relative to a list item. Its default value is “outside”.
|
list-style-image
| This value sets an image to be used as the list item marker. Its default value is “none”.
|
We will understand the concepts of list-style property through the examples.
Methods to Use CSS List Style Property
1. Using list-style property value as Square:
Example 1: This example illustrates the use of the list-style property where the position value is set to inside.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS list-style Property </title>
<style>
ul {
list-style: square inside url(
"https://write.geeksforgeeks.org/wp-content/uploads/listitem-1.png");
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS list-style Property
</h2>
<p>Sorting Algorithms</p>
<ul>
<li>Bubble Sort</li>
<li>Selection Sort</li>
<li>Merge Sort</li>
</ul>
</body>
</html>
Output:
2. Using list-style property value as Square Outside:
Example 2: This example illustrates the use of the list-style property where the position value is set to outside.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS list-style Property </title>
<style>
ul {
list-style: square outside;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS list-style Property
</h2>
<p>Sorting Algorithms</p>
<ul>
<li>Bubble Sort</li>
<li>Selection Sort</li>
<li>Merge Sort</li>
</ul>
</body>
</html>
Output:
Note: If no list-style-image is specified then it will be taken as none.
Supported Browsers: The browser supported by the list-style property are listed below:
- Google Chrome 1.0
- Internet Explorer 4.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 7.0
- Safari 1.0
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...