title: Override CSS style
body: <p>I am defining some CSS classes which, when applied to a table, will generate some default styling.</p>
  
  <p>For example, lets say I create a class called myTable:</p>
  
  <pre><code>.myTable {
    th {
      background-color: #000;
    }
  
    td {
      background-color: #555;
    }
  }
  </code></pre>
  
  <p>So any table with the .myTable class would get those colors on th and td by default.</p>
  
  <p>I thought that if another class were to be assigned to an individual td, then it would override the default style.</p>
  
  <p>So if I had another class:</p>
  
  <pre><code>.red { background-color: red; }
  </code></pre>
  
  <p>And a table:</p>
  
  <pre><code>&lt;table class=myTable&gt;
    &lt;th class="red"&gt;Content&lt;/th&gt;
    &lt;td&gt;Hello!&lt;/td&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I thought that the "red" class would cause the background of the header to be red, rather than black. That is not the case. In order for this class to override the original, it has to be defined within the myTable class like so:</p>
  
  <pre><code>td.red { background-color: red; }
  </code></pre>
  
  <p>Am I missing something here, is there another way to do this so that I could have default styles that are more easily overridden?</p>