The list-style shorthand property defines the shortcuts to set various list-style property which include list-style-type, list-style-image, and list-style-position. Lets create a web page , named liststyleshorthand.html which shows the use of the list-style shorthand property.
<!doctype html>
<head>
<style type="text/css">
ul.u1{background-color:greenyellow;list-style:url('orange_bullet.gif');}
li.l1{list-style:lower-greek;}
</style>
</head>
<body>
<ul class="u1">
<ul>milk
<ul>
<li class="l1">Goat</li>
<li class="l1">Cow</li>
</ul>
</li>
<li>Eggs
<ul>
<li class="l1">Free-range</l1>
<li class="l1">other</li>
</ul>
</li>
<li>Cheese
<ul>
<li class="l1"> Smelly</li>
<li class="l1">Extra smelly</li>
</ul>
</ul>
</body>
</html>
Here We create a nested list is created by using the ul element two times. the content of the second ul element is displayed in the lower-greek style.
The output of the Above Webpage:
<!doctype html>
<head>
<style type="text/css">
ul.u1{background-color:greenyellow;list-style:url('orange_bullet.gif');}
li.l1{list-style:lower-greek;}
</style>
</head>
<body>
<ul class="u1">
<ul>milk
<ul>
<li class="l1">Goat</li>
<li class="l1">Cow</li>
</ul>
</li>
<li>Eggs
<ul>
<li class="l1">Free-range</l1>
<li class="l1">other</li>
</ul>
</li>
<li>Cheese
<ul>
<li class="l1"> Smelly</li>
<li class="l1">Extra smelly</li>
</ul>
</ul>
</body>
</html>
Here We create a nested list is created by using the ul element two times. the content of the second ul element is displayed in the lower-greek style.
The output of the Above Webpage:
No comments:
Post a Comment