In css3 there multiple style can be applied on a list.
Following styles are given and explained below
1) list-style-type
2) list-style-position
3) list-style-image
4) list-style
The list-style-type for ordered list
There is an example of list-style-type with ordered list is given below with source code.
<style type="text/css">
.d1{
padding: 10px;
width: 100%;
border: 1px solid green;
}
.ol1 li{
list-style-type: lower-roman;
}
.ol2 li{
list-style-type: upper-alpha;
}
</style>
<div class="d1">
<ol class="ol1">
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
</ol>
<ol class="ol2">
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
</ol>
</div>
Output of above code
- ABC
- DEF
- GHI
- ABC
- DEF
- GHI
The list-style-type for un-ordered list
There is an example of list-style-type with un-ordered list is given below with source code.
<style type="text/css">
.d1{
padding: 10px;
width: 100%;
border: 1px solid green;
}
.ul1 li{
list-style-type: circle;
}
.ul2 li{
list-style-type: square;
}
</style>
<div class="d1">
<ul class="ul1">
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
</ul>
<ul class="ul2">
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
</ul>
</div>
Output of above code
- ABC
- DEF
- GHI
- ABC
- DEF
- GHI
The list-style-position for un-ordered list
There is an example of list-style-position with un-ordered list is given below with source code.
<style type="text/css">
.d1{
padding: 10px;
width: 100%;
border: 1px solid green;
}
.ul1 li{
list-style-position: outside;
list-style-type: square;
}
.ul2 li{
list-style-position: inside;
list-style-type: circle;
}
</style>
<div class="d1">
<ul class="ul1">
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
</ul>
<ul class="ul2">
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
</ul>
</div>
Output of above code
- ABC
- DEF
- GHI
- ABC
- DEF
- GHI
the list-style-position for ordered list
There is an example of list-style-position with ordered list is given below with source code.
<style type="text/css">
.d1{
padding: 10px;
width: 100%;
border: 1px solid green;
}
.ol1 li{
list-style-position: outside;
list-style-type: lower-roman;
}
.ol2 li{
list-style-type: inside;
list-style-type: upper-alpha;
}
</style>
<div class="d1">
<ol class="ol1">
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
</ol>
<ol class="ol2">
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
</ol>
</div>
Output of above code
- ABC
- DEF
- GHI
- ABC
- DEF
- GHI
The list-style-image
There is an example of list-style-image is given below with source code.
<style type="text/css">
.d1{
padding: 10px;
width: 100%;
border: 1px solid green;
}
.ol1 li{
list-style-position: outside;
list-style-image: url("xyz.gif");;
}
</style>
<div class="d1">
<ol class="ol1">
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
</ol>
</div>
Output of above code
- ABC
- DEF
- GHI
Shorthand to apply list style properties
list-style: list-style-type list-style-position list-style-image;
This is the sequence to apply all properties on a list with shorthand.
First of all list-style-type is inserted which is already
explained above.
In second there is list-style-position is inserted which
is also explained above.
In last there is list-style-image is inserted which is
also explained above.
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
