multiclass.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"			"http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>MultiClass Test</title><style type="text/css"><!--body {background: white; color: black;}li {margin: 0.33em;}.one {font-style: italic;}.one.one {font-weight: bold;}.one.two.three.four {color: red;}.four {border: 1px dotted gray;}.oh {text-decoration: underline;}.five-oh {background: #CCE;}.oh.three.five.six.seven.eight.nine {background: yellow;}--></style></head><body id="www-meyerweb-com" class="css"><p>Document styles:</p><pre>li {margin: 0.33em;}.one {font-style: italic;}.one.one {font-weight: bold;}  /* check this one! */.one.two.three.four {color: red;}.four {border: 1px dotted gray;}.oh {text-decoration: underline;}.five-oh {background: #CCE;}.oh.three.five.six.seven.eight.nine {background: yellow;}</pre><hr><p>Styled elements (text replicates <code>class</code> values):</p><ul><li class="one two">one two</li><li class="one three">one three</li><li class="four one one">four one one</li><li class="four">four</li><li class="hawaii five-oh">hawaii five-oh</li><li class="eight six seven five three oh nine">eight six seven five three oh nine</li></ul><div style="border: 5px double maroon; background: silver;"><p>The content above should appear basically the same as the graphic below-- not counting the size and family of the text itself, the width of the element boxes, or the bullet styles.</p><img src="i/multiclass.gif" style="border: 3px double gray; margin: 10px auto;" alt="reference rendering"></div></body></html>