title: Shouldn't class have preference over * selector
body: <pre><code>&lt;head&gt;
      &lt;link href=&quot;scribble.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;/head&gt;
      
  &lt;body&gt;
      &lt;a&gt; text &lt;/a&gt;
      &lt;p class=&quot;para&quot;&gt; 
          &lt;ul&gt;text&lt;/ul&gt;
          &lt;a&gt;text1 &lt;/a&gt;
      &lt;/p&gt;
  &lt;/body&gt;
  </code></pre>
  <p>My css goes like this:</p>
  <pre><code>*{background-color:#ccc;}
  
  .para{background-color:red;}
  </code></pre>
  <p>For some Reason only the universal selector is being applied and all backgrodun is gray. Why? Shouldn't the class have precedence over the universal selector?</p>