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
Formatting Unordered and Ordered Lists in CSS
The style and position of unordered and ordered lists can be formatted using CSS properties like list-style-type, list-style-image, and list-style-position. The list-style shorthand property allows you to set all these values in one declaration.
Syntax
selector {
list-style: list-style-type list-style-position list-style-image;
}
Possible Values
| Property | Values | Description |
|---|---|---|
list-style-type |
disc, circle, square, decimal, upper-roman, lower-roman, none | Sets the marker type |
list-style-position |
inside, outside | Sets marker position relative to content |
list-style-image |
url(), none | Uses custom image as marker |
Style Ordered List With Upper Roman Marker
The following example styles an ordered list with upper roman numerals as markers −
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style: upper-roman;
line-height: 150%;
}
</style>
</head>
<body>
<h2>Top Programming Languages</h2>
<ol>
<li>Python</li>
<li>Java</li>
<li>C#</li>
</ol>
</body>
</html>
A numbered list appears with Roman numerals (I, II, III) instead of regular numbers, displaying the programming languages in upper roman format.
Style Ordered List With Lower Roman Marker
The following example styles an ordered list with lower roman numerals as markers −
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style: lower-roman;
line-height: 150%;
}
</style>
</head>
<body>
<h2>Top Programming Languages</h2>
<ol>
<li>Python</li>
<li>Java</li>
<li>C#</li>
</ol>
</body>
</html>
A numbered list appears with lowercase Roman numerals (i, ii, iii) instead of regular numbers, displaying the programming languages in lower roman format.
Style Unordered List Inside the List Item
The following example styles an unordered list with circle markers positioned inside the content area −
<!DOCTYPE html>
<html>
<head>
<style>
ul ul {
list-style: circle inside;
}
li:last-child {
list-style-type: square;
}
</style>
</head>
<body>
<h2>Programming Languages</h2>
<ul>
<li>C++ programming language created by Bjarne Stroustrup as an extension of the C programming language.</li>
<li>Java programming language developed by James Gosling.</li>
<ul>
<li>Core Java</li>
<li>Advanced Java</li>
</ul>
<li>Scala is a modern multi-paradigm programming language designed to express common programming patterns in a concise, elegant, and type-safe way.</li>
</ul>
</body>
</html>
A nested list structure appears with the nested items using circle markers positioned inside the content area, while the last main item uses square markers.
Style Unordered List Outside the List Item
The following example styles an unordered list with square markers positioned outside the content area −
<!DOCTYPE html>
<html>
<head>
<style>
ul ul {
list-style: square outside;
}
li:last-child {
list-style-type: square;
}
</style>
</head>
<body>
<h2>Programming Languages</h2>
<ul>
<li>C++ programming language created by Bjarne Stroustrup as an extension of the C programming language.</li>
<li>Java programming language developed by James Gosling.</li>
<ul>
<li>Core Java</li>
<li>Advanced Java</li>
</ul>
<li>Scala is a modern multi-paradigm programming language designed to express common programming patterns in a concise, elegant, and type-safe way.</li>
</ul>
</body>
</html>
A nested list structure appears with the nested items using square markers positioned outside the content area, creating more traditional list formatting with proper indentation.
Conclusion
The list-style property provides complete control over list appearance, allowing you to customize marker types, positions, and even use custom images. Understanding these properties helps create well-formatted and visually appealing lists for web content.
341 Views
