Setting List Style Type in CSS

CSS Web Development Front End Technology

The CSS list-style-type property is used to style the marker of list items. We can apply these styles to both unordered and ordered lists.

Syntax

The syntax of CSS list-style-type property is as follows −

Selector {
   list-style-type: /*value*/
}

Example

The following examples illustrate the styling of lists

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
ol li {
   padding: 5px;
   list-style-type: lower-roman;
}
li:last-child {
   font-size: 1.2em;
   font-style: italic;
   list-style-type: circle;
}
</style>
</head>
<body>
<ol>
<li>demo1</li>
<li>
demo 2
<ul>
<li>demo a</li>
<li>demo b</li>
</ul>
</li>
<li>demo 3</li>
</ol>
</body>
</html>

Output

This gives the following output −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
ol li {
   width: 50%;
   margin: 5px;
   font-size: 1.2em;
   list-style-type: devanagari;
   border: thin solid;
   background: linear-gradient(to right, lightgreen, pink,lightblue);
}
li:last-child {
   font-style: italic;
   list-style-type: lower-latin;
}
</style>
</head>
<body>
<ol>
<li>Eh!?</li>
<li>
demo one
<ol>
<li>What!?</li>
<li>demo two</li>
</ol>
</li>
<li>demo 3</li>
<li>demo four</li>
</ol>
</body>
</html>

Output

This gives the following output

AmitDiwan

Published on 06-Jan-2020 08:04:12

Previous Page Print Page