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="cream">
<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.
list-style-position
Here by this property we can specify the position of list item maker whether it is list-type property
or list-image property.
We are having two values for specifying position for our list item maker which are as follows :-
- outside (by default)
- inside
Let's understand this by taking an example:-
<!DOCTYPE html>
<html>
<head>
<style>
.main{
list-style-position:outside;
}
.cream{
list-style-position:inside;
}
</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 position is set for the list item maker.
list-style
Here by this property we can specify every property like list-style-type, list-style-image, list-style-position in a single line,as
it is the shorthand property for specifying every value of list style property in a single line.
But before specifying list-style property we must know the order of the property values which are as follows:-
- list-style-type
- list-style-position
- list-style-image
Let's understand this by taking an example:-
<!DOCTYPE html>
<html>
<head>
<style>
.main{
list-style:circle inside url("fruits.png");
}
.cream{
list-style-:lower-roman outside 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 in one line we just declare all the properties of list item maker.
