CSS Terminology in CSS

HTML
<div class="container"> <div id="css-ruleset"> <h2>CSS Ruleset</h2> <p> <span class="block selector"><span class="green">.container</span> <span class="magenta">p</span></span><span class="green">:<span class="block pseudo-class">first-child</span>::<span class="block pseudo-element">first-letter</span></span> <span class="block open-bracket">{</span> </p> <p>     <span class="block declaration"><span class="blue">color</span>: <span class="purple">#000</span>;</span> </p> <p>     <span class="block property"><span class="blue">font-size</span></span>: <span class="block value"><span class="purple">24</span><span class="magenta">px</span></span>; </p> <p>     <span class="blue">text-transform</span>: <span class="block keyword"><span class="blue">uppercase</span></span>; </p> <p> <span class="block end-bracket">}</span> </p> </div> <!-- end css-ruleset --> </div> <!-- end container -->
CSS
@charset "utf-8"; /* CSS Document */ /* ---------- GENERAL ---------- */ body { background: #272822; color: #fff; font: 16px/36px Courier, monospace; margin: 0; } h2 { font-weight: normal; margin: 0; } p { margin: 0; } .container { height: 276px; left: 50%; margin: -138px 0 0 -220px; position: absolute; top: 50%; width: 440px; } /* ---------- CSS-RULESET ---------- */ #css-ruleset { margin: auto; } #css-ruleset h2 { font-size: 30px; line-height: 48px; margin-bottom: 48px; text-align: center; text-decoration: underline; text-transform: uppercase; } #css-ruleset p { position: relative; } /* ---------- CLASSES ---------- */ .block { border: 1px solid #fff; padding: 4px; } .blue { color: #48beef; } .green { color: #7fe22a; } .magenta { color: #f92672; } .purple { color: #ae81ff; } .selector:before, .pseudo-class:before, .pseudo-element:before, .declaration:before, .property:before, .value:before, .keyword:before, .open-bracket:before { color: #fff; font-size: 14px; position: absolute; } .selector:after, .pseudo-class:after, .pseudo-element:after, .declaration:after, .property:after, .value:after, .keyword:after, .open-bracket:after, .end-bracket:after { background: #fff; content: ""; position: absolute; } .selector:before { content: "Selector"; left: 33px; top: -38px; } .selector:after { height: 12px; left: 64px; top: -12px; width: 1px; } .pseudo-class:before { content: "Pseudo-Class"; left: 152px; top: -38px; } .pseudo-class:after { height: 12px; left: 200px; top: -12px; width: 1px; } .pseudo-element:before { content: "Pseudo-Element"; left: 289px; top: -38px; } .pseudo-element:after { height: 12px; left: 345px; top: -12px; width: 1px; } .declaration:before { content: "Declaration"; left: -92px; } .declaration:after { height: 1px; left: 0px; top: 18px; width: 36px; } .property:before { content: "Property"; left: -68px; } .property:after { height: 1px; left: 0px; top: 18px; width: 36px; } .value:before { content: "Value"; left: 362px; } .value:after { height: 1px; left: 222px; top: 18px; width: 136px; } .keyword:before { content: "Keyword"; left: 362px; } .keyword:after { height: 1px; left: 312px; top: 18px; width: 46px; } .open-bracket:before { content: "Declaration-Block"; left: 362px; top: 144px; white-space: nowrap; } .open-bracket:after { height: 118px; left: 430px; top: 36px; width: 1px; } .end-bracket:after { height: 1px; left: 24px; top: 18px; width: 332px; }
JAVASCRIPT
Expand for more options Login