The list-style property in CSS is a shorthand property used to define the overall appearance of list item markers. It combines list-style-type, list-style-position, and list-style-image into a single declaration.
- Allows customization of marker type, position, and image in one line.
- Helps create clean and visually attractive lists.
- Simplifies CSS code by combining multiple list properties together.
Syntax
list-style: list-style-type list-style-position list-style-image | initial | inherit;Property Values
Name | Description |
|---|---|
This value sets a list item element's marker (such as a disc, character, or custom counter style). Its default value is a disc. | |
This value sets the position of the marker relative to a list item. Its default value is "outside". | |
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
The CSS list-style property set to square renders square bullets for unordered lists (<ul>). It replaces default bullets with filled squares, enhancing visual presentation and list item differentiation on web pages.
Example 1: This illustrates the use of the list-style property where the position value is set to inside.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title> CSS list-style Property </title>
<!--Driver Code Ends-->
<style>
ul {
list-style: square inside url(
"https://write.geeksforgeeks.org/wp-content/uploads/listitem-1.png");
}
</style>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->
2. Using list-style property value as Square Outside
The CSS list-style property, set to square outside, places square bullets outside the list items in unordered lists (`<ul>`). This creates a clean and structured appearance with bullets neatly aligned outside list content.
Example 2: This illustrates the use of the list-style property where the position value is set to outside.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title> CSS list-style Property </title>
<!--Driver Code Ends-->
<style>
ul {
list-style: square outside;
}
</style>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->