| Wiki Markup |
|---|
{style}
.codeBlock {font-family:Verndana; font-weight:bold;}
.codeBlock b, .codeBlock span {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}
|
| Wiki Markup |
|---|
{html}
<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>
{html} |