Create and test an HTML document that describes nested ordered lists of cars. The outer list must have three entries: compact, midsize, and sports. Inside each of these three lists there must be two sublists of body styles. The compact- and midsize-car sublists are two door and four door; the sports-car sublists are coupe and convertible. Each body-style sublist must have at least three entries, each of which is the make and model of a particular car that fits the category. The outer list must use uppercase Roman numerals, the middle lists must use uppercase letters, and the inner lists must use Arabic numerals. The background color for the compact-car list must be green; for the midsize-car list, it must be blue; for the sports-car list, it must be red. All the styles must be in a document style sheet.
<!DOCTYPE html>
<html>
<head>
<title>Ques. No. 23</title>
<style type="text/css">
.outlist1 {
background-color:green;
list-style-type:upper-roman;
}
.outlist2 {
background-color:blue;
list-style-type:upper-roman;
}
.outlist3 {
background-color:red;
list-style-type:upper-roman;
}
.midlist {
list-style-type:upper-alpha;
}
.innerlist {
list-style-type:decimal;
}
</style>
</head>
<body>
<ol>
<li class="outlist1">compact
<ol class="midlist">
<li>two door
<ol class="innerlist">
<li>2005 Toyota Tacoma</li>
<li>2005 Dodge Dakota </li>
<li>2005 Ford F-150</li>
</ol>
</li>
<li>four door
<ol class="innerlist">
<li>2005 Dodge Magnum </li>
<li>2005 Audi A4 </li>
<li>2005 Mercedes-Benz E-Class </li>
</ol>
</li>
</ol><br />
</li>
<li class="outlist2">midsize
<ol class="midlist">
<li>two door
<ol class="innerlist">
<li>2005 Lincoln LS</li>
<li>2005 Lexus LX 470 </li>
<li>2005 Chrysler Sebring </li>
</ol>
</li>
<li>four door
<ol class="innerlist">
<li>2005 Toyota Sienna </li>
<li>2005 Kia Sedona </li>
<li>2005 Nissan Quest</li>
</ol>
</li>
</ol><br />
</li>
<li class="outlist3">sports
<ol class="midlist">
<li>coupe
<ol class="innerlist">
<li>2005 Chevrolet Corvette </li>
<li>2005 Mercedes-Benz CL-Class </li>
<li>2005 Mazda RX-8</li>
</ol>
</li>
<li>convertible
<ol class="innerlist">
<li>2005 Mercedes-Benz SL-Class </li>
<li>2005 BMW 6 Series</li>
<li>2005 Chevrolet Corvette </li>
</ol>
</li>
</ol><br />
</li>
</ol>
</body>
</html>
Comments
Post a Comment