diff --git a/css/main.css b/css/main.css
index d2d462d..7b21f87 100644
--- a/css/main.css
+++ b/css/main.css
@@ -258,3 +258,7 @@ footer {
 .clear {
     clear: both;
 }
+
+.e { color: #63A35C; }
+.a { color: #795DA3; }
+.v { color: #183691; }
diff --git a/examples.html b/examples.html
index 525b527..0bf533f 100644
--- a/examples.html
+++ b/examples.html
@@ -51,7 +51,7 @@
                 <div class="explanation">
                     <p>You can place Keyrune icons anywhere using the CSS classname prefix <code>ss</code> (for set symbol) and then the set icon's code. Inline elements like <code>&lt;i&gt;</code> and <code>&lt;span&gt;</code> are preferred, but any can be used.</p>
                     <blockquote>
-                        &lt;i class="ss ss-zen"&gt;&lt/i&gt; ss-zen
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-zen
                     </blockquote>
                 </div>
                 <div class="clear"></div>
@@ -68,11 +68,11 @@
                 <div class="explanation">
                     <p>To conveniently increase the size of a set symbol you can append the classes <code>ss-2x</code>, <code>ss-3x</code>, <code>ss-4x</code>, <code>ss-4x</code>, and <code>ss-6x</code>. These classes increase the size by a factor equal to class name number.</p>
                     <blockquote>
-                        &lt;i class="ss ss-zen ss-2x"&gt;&lt/i&gt; ss-2x<br />
-                        &lt;i class="ss ss-zen ss-3x"&gt;&lt/i&gt; ss-3x<br />
-                        &lt;i class="ss ss-zen ss-4x"&gt;&lt/i&gt; ss-4x<br />
-                        &lt;i class="ss ss-zen ss-5x"&gt;&lt/i&gt; ss-5x<br />
-                        &lt;i class="ss ss-zen ss-6x"&gt;&lt/i&gt; ss-6x
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen ss-2x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-2x<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen ss-3x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-3x<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen ss-4x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-4x<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen ss-5x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-5x<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen ss-6x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-6x
                     </blockquote>
                 </div>
                 <div class="clear"></div>
@@ -88,10 +88,10 @@
                 <div class="explanation">
                     <p>You can add a rarity color to each set symbol by appending the classes <code>ss-common</code>, <code>ss-uncommon</code>, <code>ss-rare</code>, and <code>ss-mythic</code>.</p>
                     <blockquote>
-                        &lt;i class="ss ss-ons ss-common"&gt;&lt/i&gt; ss-common<br />
-                        &lt;i class="ss ss-ons ss-uncommon"&gt;&lt/i&gt; ss-uncommon<br />
-                        &lt;i class="ss ss-ons ss-rare"&gt;&lt/i&gt; ss-rare<br />
-                        &lt;i class="ss ss-ons ss-mythic"&gt;&lt/i&gt; ss-mythic
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-common"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-common<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-uncommon"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-uncommon<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-rare"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-rare<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-mythic"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-mythic
                     </blockquote>
                 </div>
                 <div class="clear"></div>
diff --git a/index.html b/index.html
index 3253966..41f0f36 100644
--- a/index.html
+++ b/index.html
@@ -59,7 +59,8 @@
                 <p>Each set symbol has its own font character. Display them in a manner similar to <a href="http://fontawesome.io">Font Awesome</a> using the <code>&lt;i class="ss ss-exp"&gt;&lt;/i&gt;</code> element. Class name codes are based on the expansion codes from <a href="http://mtgjson.com">MTG JSON</a>.</p>
                 <p>To use Keyrune, move the font files to your /fonts directory and include the <code>keyrune.css</code> stylesheet in your <code>&lt;head&gt;</code>:</p>
                 <blockquote>
-                    &lt;link href="css/keyrune.css" rel="stylesheet" type="text/css" /&gt;</blockquote>
+                    &lt;<span class="e">link</span> <span class="a">href</span>=<span class="v">"css/keyrune.css"</span> <span class="a">rel</span>=<span class="v">"stylesheet"</span> <span class="a">type</span>=<span class="v">"text/css"</span> /&gt;
+                </blockquote>
             </section>
             <section class="content">
                 <h4>Editing the Source</h4>