Create, test and validate a CSS document to describe an ordered list with the following contents: the highest level should be the names of your two parents with your mother first. Under each parent you must have a nested ordered list with the brothers and sisters of your parents in order with the eldest first. Each of the nested lists must have nested list that list the children of your uncles and aunts under the proper parents. There must be at least three list items in each sub list below each of your parents and below each of your uncles and aunts.
<!DOCTYPE html>
<html>
<head>
<title>family</title>
</head>
<style type="text/css">
font{color:blue;
font-weights:bolder;
font-style:Castellar;
font-size:13pt;
}
h1{text-indent:6in;
text-decoration:underline;
font-family:sans-serif,cursive;
}
ol {list-style-type:lower-roman;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:decimal;}
</style>
<body>
<h1>FAMILY TREE</h1>
<hr/>
<font>
<ol>
<li>SUGUNA</li>
<ol>
<li>Sunitha</li>
<ol>
<li> Prajwal</li>
<li>Prathima</li>
</ol><br/>
</li>
<li>Shobha</li>
<ol>
<li>Athith</li>
<li>Ashwin</li>
</ol><br />
</li>
<li>Sunil</li>
<ol>
<li>Sowjanya</li>
<li>Swaroop</li>
</ol>
</li>
</ol><br/>
</li>
<li>VASU</li>
<ol>
<li>Raghu</li>
<ol>
<li>Adithi</li>
<li>Anaga</li>
</ol>
</li>
<li>Radha</li>
<ol >
<li>Vinutha</li>
<li>Vijetha</li>
</ol>
</li>
<li>Vishwanath</li>
<ol>
<li>Anirudh</li>
<li>Athreya</li>
</ol>
</li>
</ol><br/>
</li>
</ol>
</font>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
<title>family</title>
</head>
<style type="text/css">
font{color:blue;
font-weights:bolder;
font-style:Castellar;
font-size:13pt;
}
h1{text-indent:6in;
text-decoration:underline;
font-family:sans-serif,cursive;
}
ol {list-style-type:lower-roman;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:decimal;}
</style>
<body>
<h1>FAMILY TREE</h1>
<hr/>
<font>
<ol>
<li>SUGUNA</li>
<ol>
<li>Sunitha</li>
<ol>
<li> Prajwal</li>
<li>Prathima</li>
</ol><br/>
</li>
<li>Shobha</li>
<ol>
<li>Athith</li>
<li>Ashwin</li>
</ol><br />
</li>
<li>Sunil</li>
<ol>
<li>Sowjanya</li>
<li>Swaroop</li>
</ol>
</li>
</ol><br/>
</li>
<li>VASU</li>
<ol>
<li>Raghu</li>
<ol>
<li>Adithi</li>
<li>Anaga</li>
</ol>
</li>
<li>Radha</li>
<ol >
<li>Vinutha</li>
<li>Vijetha</li>
</ol>
</li>
<li>Vishwanath</li>
<ol>
<li>Anirudh</li>
<li>Athreya</li>
</ol>
</li>
</ol><br/>
</li>
</ol>
</font>
</body>
</html>
Output:
No comments:
Write comments