CSS Lists

CSS Lists:

In HTML, there are two main types of lists:
1)unordered lists (<ul>) – the list items are marked with bulleting mark
2)ordered lists (<ol>) – the list items are marked with numbers or letters
The CSS list properties allow us to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

 

Property Description
list-style Sets all the properties for a list in only in onece declaration
list-style-image Specifies an image appear as the list-item marker
list-style-position Specifies if the list-item markers may appear inside or outside the content flow
list-style-type It specifies the type of list-item marker
Example
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
margin: 5px;
}
ul.a {
list-style-type: disk;
}

ul.b {
list-style-type: square;
}
ul.b1{list-style-type: circle;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Example of unordered lists:</p>
<ul class=”a”>
<li>red</li>
<li>blue</li>
<li>green </li>
</ul>

<ul class=”b”>
<li>red</li>
<li&gr;blue</li>
<li>green </li>
</ul>
<p>Example of ordered lists:</p>

<ol class=”c”>
<li>red

<li>blue

<li>green

</ol>

<ol class=”d”>
<li>red

<li>blue

<li>green

</ol>

</body>
</html>