Different List Item Markers in HTML and CSS

Different List Item Markers in HTML and CSS

In this tutorial, we will learn the cod of  “Different List Item Markers in HTML and CSS”.

Code of “Different List Item Markers in HTML and CSS”

<html>
<head>
<style>

ul.a {
list-style-type: circle;
border: 5px solid blue;
}

ul.b {
list-style-type: square;
border: 5px solid red;
}

ol.c {
list-style-type: upper-roman;
border: 5px solid green;
}

ol.d {
list-style-type: lower-alpha;
border: 5px solid pink;
}

h1, p
{
color: purple;
}

</style>
</head>
<body>

<h1>Different List Item Markers:</h1>

<p><b>Example of Unordered lists:</b></p>
<ul class=”a”>
<li>Tea</li>
<li>Sandwich</li>
<li>Coca-Cola</li>
</ul>

<ul class=”b”>
<li>Tea</li>
<li>Sandwich</li>
<li>Coca-Cola</li>
</ul>

<p><b>Example of Ordered lists:</b></p>
<ol class=”c”>
<li>Tea</li>
<li>Sandwich</li>
<li>Coca-Cola</li>
</ol>

<ol class=”d”>
<li>Tea</li>
<li>Sandwich</li>
<li>Coca-Cola</li>
</ol>

<img src=”logo.jpg”/>

</body>
</html>

The output of code of  “Different List Item Markers in HTML and CSS”

Different List Item Markers in HTML-CSS
Figure: Different List Item Markers in HTML-CSS