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
Styling Lists with CSS
Lists are ordered as well unordered. With CSS, you can set the list item markers or an image for the markers. You can also control the position of list-item markers to customize the appearance of your lists.
Syntax
selector {
list-style-type: value;
list-style-image: url('path');
list-style-position: value;
list-style: shorthand-value;
}
list-style-type Property
The list-style-type property is used to set the type of list-item marker.
Example
Let us now see an example wherein we are formatting unordered lists with upper roman numerals −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</body>
</html>
A list displaying team names with upper roman numerals (I, II, III, IV, V, VI) as markers instead of default bullets.
list-style-image Property
The list-style-image property is used to set an image as the list-item marker.
Example
Let us now see an example using custom images as list markers −
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
list-style-image: url('/images/Swift.png');
}
ol.demo2 {
list-style-image: url('/images/Swift.png');
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul class="demo1">
<li>India - Qualified for WorldCup</li>
<li>Australia - Qualified for WorldCup</li>
<li>England - Qualified for WorldCup</li>
</ul>
<h2>Players</h2>
<ol class="demo2">
<li>Virat Kohli</li>
<li>David Warner</li>
<li>Steve Smith</li>
</ol>
</body>
</html>
Both unordered and ordered lists display custom images as markers instead of default bullets or numbers.
list-style-position Property
The list-style-position property is used to set the position of the list-item markers.
Example
Let us now see an example comparing inside and outside positioning −
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
list-style-position: outside;
border: 1px solid #ccc;
padding: 10px;
}
ul.demo2 {
list-style-position: inside;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h2>Outside Position</h2>
<ul class="demo1">
<li>India</li>
<li>Australia</li>
<li>England</li>
</ul>
<h2>Inside Position</h2>
<ul class="demo2">
<li>India</li>
<li>Australia</li>
<li>England</li>
</ul>
</body>
</html>
Two bordered lists showing the difference: outside positioning places bullets outside the content box, while inside positioning places them within the content area.
Conclusion
CSS list properties provide complete control over list styling. Use list-style-type for different marker types, list-style-image for custom images, and list-style-position to control marker placement.
264 Views
