dualclass.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>meyer's 5.8.3 chart selector issue</title>
<style type="text/css">
/*  body,p,td {
  font-family : verdana,sans-serif;
  font-size : 14px;
  letter-spacing : 1px;
  line-height : 18px;
 } */
 .outside {
  font-family : 'times new roman',serif;
  color: red;
 }
 .inside {
  font-family : 'andale mono',monospace;
  color: green;
 }
 /* according to rule 5.8.3 as I see it, the following class
*/
 .outside.inside {
  font-size : 200%;
  line-height : 130%;
  color: purple;
 }
 /* for demonstrating the use of two separate classes to
define a single class */
 .insidesep {
  font-size : 300%;
  line-height : 160%;
  color: blue;
 }
</style>
</head>
<body id="www-meyerweb-com" class="css">
<p>The Fox Jumped Over The Lazy Dog.</p>
<p class="outside">(1) This sentence has a class in the &lt;p&gt; element, '.outside'.</p>
<p class="inside">(2) This sentence has a class in the &lt;p&gt; element, '.inside'.</p>
<p class="outside">(3) This sentence has a class in the &lt;p&gt; element ('.outside') <span class="inside">but this inline &lt;span&gt; has the '.inside' class in it.</span></p>
<p class="outside inside">(4) This sentence has both the '.outside' and '.inside' classes attributed to the &lt;p&gt; element.</p>
<p class="outside insidesep">(5) This sentence has both the '.outside' and '.insidesep' classes attributed to the &lt;p&gt; element.</p>
</body>
</html>