Styling the list part 1

The list-style-type Property

The CSS list properties allow us to set different list item markers. In HTML, there are two types of lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
One of the ways is to use the list-style-typeproperty, which can be set to circle, square, decimal, disc, lower-alpha, etc. 

The HTML:<ol class="lower-alpha">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>
<ul class="circle">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
<ul class="square">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
The CSS:

ol.lower-alpha {
list-style-type: lower-alpha;}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}Try It Yourself

Result:
Some of the values are for unordered lists, and some for ordered lists.