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
Specify all the list properties into a single expression with CSS
The list-style property is a CSS shorthand that allows you to specify all list-related properties in a single expression. It combines list-style-type, list-style-position, and list-style-image into one convenient declaration.
Syntax
list-style: [list-style-type] [list-style-position] [list-style-image];
The values can be specified in any order, and any omitted values will use their default.
Properties Combined
| Property | Description | Default Value |
|---|---|---|
list-style-type |
Bullet or numbering style |
disc (ul), decimal (ol) |
list-style-position |
Position of marker | outside |
list-style-image |
Custom image for bullets | none |
Example: Basic List Styling
<html>
<head>
<title>List Style Example</title>
</head>
<body>
<h3>Unordered List with Circle Bullets Inside</h3>
<ul style="list-style: inside circle;">
<li>Laptop</li>
<li>Desktop System</li>
<li>Tablet</li>
</ul>
<h3>Ordered List with Lowercase Letters Outside</h3>
<ol style="list-style: outside lower-alpha;">
<li>Laptop</li>
<li>Desktop System</li>
<li>Tablet</li>
</ol>
</body>
</html>
Example: Multiple Shorthand Variations
<html>
<head>
<style>
.style1 { list-style: square inside; }
.style2 { list-style: upper-roman outside; }
.style3 { list-style: none; }
.style4 { list-style: disc outside url('/images/bullet.png'); }
</style>
</head>
<body>
<ul class="style1">
<li>Square bullets inside</li>
</ul>
<ol class="style2">
<li>Roman numerals outside</li>
</ol>
<ul class="style3">
<li>No bullets</li>
</ul>
<ul class="style4">
<li>Custom image bullet</li>
</ul>
</body>
</html>
Common Values
Type values: disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, none
Position values: inside, outside
Image values: none, url('path/to/image.png')
Conclusion
The list-style shorthand property streamlines list formatting by combining type, position, and image properties into a single CSS declaration. It's the most efficient way to style HTML lists.
Updated on: 2026-03-15T23:18:59+05:30
154 Views
Advertisements