I am trying to write code that will list different automobiles in three different ordered lists with three different colored backgrounds ( using document style CSS). The lists are compact, midsize, and sport. I have my ordered list working correctly--except I can't get my colors to work. Can someone tell me what I am doing wrong
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multi-colored background</title>
<style type = "text/css">
ol {list-style-type: upper-roman;}
ol ol {list-style-type: upper-alpha;}
ol ol ol {list-style-type: decimal:}
p.compact{background-color: pink;}
p.midsize {background-color:blue;}
p.sport {background-color: red;}
</style>
</head>
<h2>Automobile Types </h2>
<ol>
<p.class = "compact">
<li><h3>Compact</h3>
<ol>
<li><h4>Two Door</h4>
<ol>
<li>Dodge Neon</li>
<li>Chevy Cobalt</li>
<li>Ford Focus</li>
</ol>
</li>
<li><h4>Four Door</h4>
<ol>
<li>Dodge Neon</li>
<li>Chevy Cobalt</li>
<li>Ford Focus</li>
</ol>
</li>
</ol>
< /li><br />
</p>
<p class = "midsize">
<li><h3>Mid Size</h3>
<ol>
<li><h4>Two Door</h4>
<ol>
<li>Chrysler Serbring</li>
<li>Dodge Caliber</li>
<li>Dodge Charger</li>
</ol>
</li>
<li><h4>Four Door</h4>
<ol>
<li>Dodge Stratus</li>
<li>Dodge Intrepid</li>
<li>Chrysler Concord</li></p>
</ol>
</li>
</ol>
</li><br />
</p>
<p class = "sport">
<li><h3>Sports</h3>
<ol>
<li><h4>Coupe</h4>
<ol>
<li>Dodge Viper</li>
<li>Dodge Charger</li>
<li>Chevy Camero</li>
</ol>
</li>
<li><h4>Convertible</h4>
<ol>
<li>Dodge Viper</li>
<li>Ford Mustang</li>
<li>Chevy Corvette</li></p>
</ol>
</li>
</ol>
</li>
</p>
</body>
</html>