In: Computer Science
check the following code:
is the requirements correct ? if not solve it .
All the styles must be in a document style sheet. YOU ARE NOT ALLOWED TO USE THE type ATTRIBUTE ON THE LIST, you must use CSS to apply the style.
<!DOCTYPE html>
<html>
<head>
<title> car list</title>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<style type="text/css"> ol{list-style-type:upper-roman;}
ol ol{list-style-type:upper-alpha;}
ol ol ol{list-style-type:decimal;}
li.compact{background-color:pink;}
li.midsize{background-color:blue;} li.sports{background-
color:red;}
ol.compact{background-color:pink;}
ol.midsize{background-color:blue;}
ol.sports{background-color:red;}
</style>
</head>
<body>
<h1>Nested Ordered List of Cars</h1>
<ol>
<li class="compact">Compact</li>
<ol class="compact">
<li>Two Door</li>
<ol>
<li>2012</li>
<li>Mod2012</li>
<li>REVA</li>
</ol>
<li>Four Door</li>
<ol>
<li>2012</li>
<li>Model 800</li>
<li>Maruthi Swift</li>
</ol>
</ol>
<li class="midsize">Midsize</li>
<ol class="midsize">
<li>Two Door</li>
<ol>
<li>2012</li>
<li>Mod2012</li>
<li>REVA</li>
</ol>
<li>Four Door</li>
<ol>
<li>2012</li>
<li>Model 800</li>
<li>Maruthi Swift</li>
</ol>
</ol>
<li class="sports">Sports</li>
<ol class="sports">
<li>Coupe</li>
<ol>
<li>2012</li>
<li>Mod2012</li>
<li>REVA</li>
</ol>
<li>Convertible</li>
<ol>
<li>2012</li>
<li>Model 800</li>
<li>Maruthi Swift</li>
</ol>
</ol>
</ol>
</body>
</html>
The code meets the requirement, but it would be better if you could move the CSS into an external file as shown in the code below.
CODE
theme.css
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
ol{list-style-type:upper-roman;}
ol ol{list-style-type:upper-alpha;}
ol ol ol{list-style-type:decimal;}
li.compact{background-color:pink;}
li.midsize{background-color:blue;} li.sports{background-
color:red;}
ol.compact{background-color:pink;}
ol.midsize{background-color:blue;}
ol.sports{background-color:red;}
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title> car list</title>
<link rel="stylesheet" type="text/css"
href="theme.css">
</head>
<body>
<h1>Nested Ordered List of Cars</h1>
<ol>
<li class="compact">Compact</li>
<ol class="compact">
<li>Two Door</li>
<ol>
<li>2012</li>
<li>Mod2012</li>
<li>REVA</li>
</ol>
<li>Four Door</li>
<ol>
<li>2012</li>
<li>Model 800</li>
<li>Maruthi Swift</li>
</ol>
</ol>
<li class="midsize">Midsize</li>
<ol class="midsize">
<li>Two Door</li>
<ol>
<li>2012</li>
<li>Mod2012</li>
<li>REVA</li>
</ol>
<li>Four Door</li>
<ol>
<li>2012</li>
<li>Model 800</li>
<li>Maruthi Swift</li>
</ol>
</ol>
<li class="sports">Sports</li>
<ol class="sports">
<li>Coupe</li>
<ol>
<li>2012</li>
<li>Mod2012</li>
<li>REVA</li>
</ol>
<li>Convertible</li>
<ol>
<li>2012</li>
<li>Model 800</li>
<li>Maruthi Swift</li>
</ol>
</ol>
</ol>
</body>
</html>