Page Comparison

.codeBlock {font-family:Verndana; font-weight:bold;}
.codeBlock b, pre.codeBlock bspan {font-family:monospace; font-weight:bold; line-height:2em}
.selector {border:1px solid #000}
.declaration {border:1px solid #CCC}
.tag {background-color:#ffb2b2}
.child {background-color:#f0cca8}
.id {background-color:#f0f078}
.class {background-color:#ccf0a8}
.attr {background-color:#b3d9ff}
.rule {background-color:#ddbbff}
{style}


{html}
<pre class="codeBlock">

<span class="selector"><b class="tag">DIV P</b><b class="child"> > </b><b class="id"> #id</b><b class="class"> .class </b>INPUT<b class="attr">[attribute=value]</b></span> <span class="declaration">{
    <b class="rule">font-size: 1em;</b>
    <b class="rule">font-color: #999;</b>
}</span>
<p>
This whole block of code is called a CSS rule set. It is made up of multiple peices
</p>
<span class="selector"> &nbsp; &nbsp; </span> encapsulates the entire CSS selector<br />
<span class="declaration"> &nbsp; &nbsp; </span> encapsulates the entire CSS declaration <br />
<b class="tag">DIV P</b> is a contextual selector <br />
<b class="child"> > </b> is a parent-child selector <br />
<b class="id"> #id</b> is an ID selector <br />
<b class="class"> .class</b> is a class name selector <br />
<b class="attr">[attribute=value]</b> is an attribute selector <br />
<b class="rule">font-size: 1em;</b> is the CSS
rule <br />

</pre>

{html}