title: CSS Link/Hover Not Working
body: <p>I have a link which should display white for 'regular' and hover, and light blue for active. </p>
  
  <p>But it shows purple for 'regular'. Why?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .button {
    text-decoration:none; 
    color: red; 
    background: purple; 
    }
    .button:hover {
    color: white; 
    background: purple; 
    }
    .button:active {
    color: red; 
    background: purple;
    }
    .button:visited {
    color: purple; 
    background: purple; 
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="example.com" style="text-decoration:none" class="button"&gt;text&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="example.com" style="text-decoration:none" class="button"&gt;text&lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style&gt;
    .button {
    text-decoration:none; 
    color: red; 
    background: purple; 
    }
    .button:hover {
    color: white; 
    background: purple; 
    }
    .button:active {
    color: red; 
    background: purple;
    }
    .button:visited {
    color: purple; 
    background: purple; 
    }
  &lt;/style&gt;
  </code></pre>