<pre class="codeBlock">
<p class="example">
<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>
</pre>
<pre>
<p>This whole block of code is called a CSS rule set. It is made up of multiple peices</p>
<span class="selector"> </span> encapsulates the entire CSS selector <br />
<span class="declaration"> </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>