Create, test and validate a CSS document to describe an unordered list of a typical grocery shopping of your choice.
<!DOCTYPE html>
<html>
<head>
<title>grocerry</title>
</head>
<!DOCTYPE html>
<html>
<head>
<title>grocerry</title>
</head>
<style type="text/css">
li.disc{list-style-type:disc}
li.square{list-style-type:square}
li.circle{list-style-type:circle}
</style>
<body bgcolor="pink">
<h1 align="center"><u><font face="Lucida
Calligraphy" size="6" color="red">GROCERRY
SHOPPING</font></u></h1>
<ul><font face="jokerman" size="4"
color="blue">
<li class="disc" >VEGETABLES
<ul>
<li class="square">potato:1kg</li>
<li class="square">tomato:2kgs</li>
<li class="square">carrot:2 1/2kgs</li>
<li class="square">green peas:1kg</li>
<li class="square">cucumber:5</li>
</ul>
<li class="disc">CEREALS
<ul>
<li class="circle">green
gram:500gms</li>
<li class="circle">horse
gram:250gms</li>
<li class="circle">soya
beans:500gms</li>
<li class="circle">rajma:250gms</li>
<li class="circle">dried
peas:500gms</li>
</ul>
<li class="disc">OILS
<ul>
<li class="square">groundnut
oil:2ltrs</li>
<li class= "square">mustard
oil:1ltr</li>
<li class="square">coconut
oil:1ltr</li>
<li class="square">castroil:1/2ltr</li>
<li class= "square">sunflower
oil:1ltr</li>
</ul>
<li class="disc">OTHERS
<ul>
<li class="circle" >sugar:3kgs</li>
<li class="circle">rice:25kgs</li>
<li class="circle">wheat
flour:5kgs</li>
<li class="circle" >ragi flour</li>
</ul>
</font>
</ul>
</body>
</html>
Output:
No comments:
Write comments