Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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