Setting List Style Type using CSS

CSSWeb DevelopmentFront End Technology

To set the list style type in CSS, use the list-style-type property in CSS.

Example

Let us see an example wherein we are setting list style type for unordered list −

 Live Demo

<!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

Example

Let us now see an example wherein we are setting list style type for ordered lists (ol) −

 Live Demo

<!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

raja
Published on 30-Dec-2019 11:12:19
Advertisements