<p dir="auto">Challenge <a href="http://www.freecodecamp.com/challenges/waypoint-override-styles-in-subsequent-css#?solution=%3Cstyle%3E%0A%20%20body%20%7B%0A%20%20%20%20background-color%3A%20black%3B%0A%20%20%20%20font-family%3A%20Monospace%3B%0A%20%20%20%20color%3A%20green%3B%0A%20%20%7D%0A%20%20.pink-text%20%7B%0A%20%20%20%20color%3A%20pink%3B%0A%20%20%7D%0A%20%20.blue-text%20%7B%0A%20%C2%A0%20%20color%3A%20blue%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%3Ch1%20class%3D%22pink-text%20blue-text%22%3EHello%20World!%3C%2Fh1%3E%0A%0A" rel="nofollow">Waypoint: Override Styles in Subsequent CSS</a> has an issue.<br>
User Agent is: <code class="notranslate">Mozilla/5.0 (Linux; Android 4.4.2; Lenovo B6000-H Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Safari/537.36</code>.<br>
Please describe how to reproduce this issue, and include links to screenshots if possible.</p>
<p dir="auto">My code:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;style&gt;
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
&lt;/style&gt;
&lt;h1 class=&quot;pink-text blue-text&quot;&gt;Hello World!&lt;/h1&gt;

"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
  <span class="pl-ent">body</span> {
    <span class="pl-c1">background-color</span><span class="pl-kos">:</span> black;
    <span class="pl-c1">font-family</span><span class="pl-kos">:</span> Monospace;
    <span class="pl-c1">color</span><span class="pl-kos">:</span> green;
  }
  .<span class="pl-c1">pink-text</span> {
    <span class="pl-c1">color</span><span class="pl-kos">:</span> pink;
  }
  .<span class="pl-c1">blue-text</span> {
    col<span class="pl-c1">or</span><span class="pl-kos">:</span> <span class="pl-c1">blue</span>;
  }
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">h1</span> <span class="pl-c1">class</span>="<span class="pl-s">pink-text blue-text</span>"<span class="pl-kos">&gt;</span>Hello World!<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>
</pre></div>
<p dir="auto">Challenge <a href="http://www.freecodecamp.com/challenges/waypoint-override-class-declarations-with-inline-styles#?solution=%3Cstyle%3E%0A%20%20body%20%7B%0A%20%20%20%20background-color%3A%20black%3B%0A%20%20%20%20font-family%3A%20Monospace%3B%0A%20%20%20%20color%3A%20green%3B%0A%20%20%7D%0A%20%20%23orange-text%20%7B%0A%20%20%20%20color%3A%20orange%3B%0A%20%20%7D%0A%20%20.pink-text%20%7B%0A%20%20%20%20color%3A%20pink%3B%0A%20%20%7D%0A%20%20.blue-text%20%7B%0A%20%20%20%20color%3A%20blue%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%3Ch1%20id%3D%22orange-text%22%20%0Aclass%3D%22pink-text%20blue-text%22%0Astyle%3D%22color%3A%20white%22%3EHello%20World!%3C%2Fh1%3E%0A" rel="nofollow">Waypoint: Override Class Declarations with Inline Styles</a> has an issue.<br>
User Agent is: <code class="notranslate">Mozilla/5.0 (Windows NT 6.1; rv:42.0) Gecko/20100101 Firefox/42.0</code>.<br>
Please describe how to reproduce this issue, and include links to screenshots if possible.</p>
<p dir="auto">My code:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;style&gt;
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
&lt;/style&gt;
&lt;h1 id=&quot;orange-text&quot; 
class=&quot;pink-text blue-text&quot;
style=&quot;color: white&quot;&gt;Hello World!&lt;/h1&gt;
"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
  <span class="pl-ent">body</span> {
    <span class="pl-c1">background-color</span><span class="pl-kos">:</span> black;
    <span class="pl-c1">font-family</span><span class="pl-kos">:</span> Monospace;
    <span class="pl-c1">color</span><span class="pl-kos">:</span> green;
  }
  <span class="pl-kos">#</span><span class="pl-c1">orange-text</span> {
    <span class="pl-c1">color</span><span class="pl-kos">:</span> orange;
  }
  .<span class="pl-c1">pink-text</span> {
    <span class="pl-c1">color</span><span class="pl-kos">:</span> pink;
  }
  .<span class="pl-c1">blue-text</span> {
    <span class="pl-c1">color</span><span class="pl-kos">:</span> blue;
  }
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">h1</span> <span class="pl-c1">id</span>="<span class="pl-s">orange-text</span>" 
<span class="pl-c1">class</span>="<span class="pl-s">pink-text blue-text</span>"
<span class="pl-c1">style</span>="<span class="pl-s">color: white</span>"<span class="pl-kos">&gt;</span>Hello World!<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span></pre></div>