Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of CSS list-style property
The CSS list-style property serves as a shorthand for setting all list-related properties in a single declaration. It allows you to specify the list marker type, position, and image simultaneously.
Syntax
selector {
list-style: list-style-type list-style-position list-style-image;
}
Possible Values
| Property | Description | Values |
|---|---|---|
list-style-type |
Specifies the marker type | disc, circle, square, decimal, none, etc. |
list-style-position |
Specifies marker position | inside, outside |
list-style-image |
Uses custom image as marker | url() or none |
Example: Basic List Style
The following example demonstrates using the list-style shorthand property −
<!DOCTYPE html>
<html>
<head>
<style>
.custom-list {
list-style: square inside;
background-color: #f0f0f0;
padding: 20px;
margin: 20px 0;
}
.default-list {
background-color: #e8e8e8;
padding: 20px;
margin: 20px 0;
}
</style>
</head>
<body>
<h3>Custom List Style</h3>
<ul class="custom-list">
<li>Table</li>
<li>Chair</li>
<li>Desk</li>
</ul>
<h3>Default List Style</h3>
<ul class="default-list">
<li>Table</li>
<li>Chair</li>
<li>Desk</li>
</ul>
</body>
</html>
Two lists appear: the first with square markers positioned inside the content area, and the second with default round markers positioned outside.
Example: Multiple List Styles
This example shows different combinations of list-style values −
<!DOCTYPE html>
<html>
<head>
<style>
.list-decimal {
list-style: decimal outside;
margin: 15px 0;
}
.list-circle {
list-style: circle inside;
margin: 15px 0;
}
.list-none {
list-style: none;
margin: 15px 0;
padding-left: 0;
}
</style>
</head>
<body>
<ul class="list-decimal">
<li>Numbered list item</li>
<li>Another item</li>
</ul>
<ul class="list-circle">
<li>Circle markers inside</li>
<li>Content alignment</li>
</ul>
<ul class="list-none">
<li>No markers</li>
<li>Clean list</li>
</ul>
</body>
</html>
Three different lists: numbered list with outside positioning, circular markers with inside positioning, and a clean list with no markers.
Conclusion
The list-style shorthand property provides an efficient way to control list appearance. You can specify marker type, position, and image in a single declaration, making your CSS more concise and maintainable.
Updated on: 2026-03-15T11:19:30+05:30
87 Views
Advertisements