Formatting Unordered and Ordered Lists Using CSS

To format both unordered and ordered lists, use the list-style-type, list-style-image, and list-style-position properties.

Example

Let us see an example wherein we are formatting unordered lists (ul) −

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   list-style-type: square;
}
</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>

Output

Formatting Unordered and Ordered Lists Using CSS

Example

Let us now see an example wherein we are formatting ordered lists (ol) −

<!DOCTYPE html>
<html>
<head>
<style>
ol {
   list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ol>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ol>
</body>
</html>

Output

Formatting Unordered and Ordered Lists Using CSS

Example

Let us see another example wherein we will set an image for list style for both ordered and unordered lists −

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
   list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
ol.demo2 {
   list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul class="demo1">
<li>India - Qualified for WordCup</li>
<li>Australia - Qualified for WordCup</li>
<li>England - Qualified for WordCup</li>
</ul>
<h2>Players</h2>
<ol class="demo2">
<li>Virat Kohli</li>
<li>David Warner</li>
<li>Steve Smith</li>
</ol>
</body>
</html>

Output

Formatting Unordered and Ordered Lists Using CSS