CSS List
As earlier also we have discussed in HTML part that mainly we are having two types of list wich are as follows :-
- Unordered List
- Ordered List
Here by CSS we can set different list item makers for ordered list or unordered list , and can set image as list item maker
and can give background-color to the list as well as list items by the following ways :-
list-style-type
Here by this property we can specify the type property of list item maker whether it is ordered list property or unordered list property
by its property values.
Let's understand this by taking an example:-
<!DOCTYPE html>
<html>
<head>
<style>
.main{ list-style-type:circle; }
.look{ list-style-type:square; }
.choose{ list-style-type:lower-roman; }
.cream{ list-style-type:upper-roman; }
</style>
</head>
<body>
<div>
<p> List of fruits </p>
<ul class="main">
<li> Mango </li>
<li> Apple </li>
<li> Grapes </li>
</ul>
</div>
<div>
<p> List of vegetables </p>
<ul class="look">
<li> Potato </li>
<li> Carrot </li>
<li> Cabbage </li>
</ul>
</div>
<div>
<p> List of juice </p>
<ul class="choose">
<li> Mango juice </li>
<li> Apple juice </li>
<li> Lemon juice </li>
</ul>
</div>
<div>
<p> List of ice-cream </p>
<ul class="cream">
<li> Vanila ice-cream </li>
<li> Chocolate ice-cream </li>
<li> Strawberry ice-cream </li>
</ul>
</div>
</body>
</html>
Output of the Program
List of juice
- Mango juice
- Apple juice
- Lemon juice
List of ice-cream
- Vanila ice-cream
- Chocolate ice-cream
- Strawberry ice-cream
Here we can see our list is ready through css list property.
list-style-image
Here by this property we can specify the image in place of type property of list item maker whether it is ordered list property
or unordered list property.
Let's understand this by taking an example:-
<!DOCTYPE html>
<html>
<head>
<style>
.main{
list-style-image:url("fruits.jpg");
}
.cream{
list-style-image:url("icecream.jpg");
}
</style>
</head>
<body>
<div>
<p> List of fruits </p>
<ul class="main">
<li> Mango </li>
<li> Apple </li>
<li> Grapes </li>
</ul>
</div>
<div>
<p> List of ice-cream </p>
<ol class="cream">
<li> Vanila ice-cream </li>
<li> Chocolate ice-cream </li>
<li> Strawberry ice-cream </li>
</ul>
</div>
</body>
</html>
Output of the Program
List of ice-cream
- Vanila ice-cream
- Chocolate ice-cream
- Strawberry ice-cream
Here our image is set as the list item maker.
