title: Override CSS rule starting with period
body: <p>I have a css rule that I am having trouble overriding:</p>
  
  <pre><code>body {
      font: 12px/1.45em Verdana, Arial, Helvetica, sans-serif;
      line-height: 1.116;
      margin: 0px;
      padding: 0px;
      background: #cccccc url(/images/bg_grad.jpg) fixed;
      background: #71828A;
  }
  .popup_text {
      color: #FFFFFF;
      font: 12px/1.45em Verdana, Arial, Helvetica, sans-serif;
      padding: 10px;
      margin: 5px;
  }
  
  &lt;body class="popup_text"&gt;
  </code></pre>
  
  <p>I want to override <code>popup_text</code> with a different <code>font-size</code>.  Here is what I have tried:</p>
  
  <pre><code>.popup_text.big {
      font-size: 16px;
  }
  
  &lt;body class="big"&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>.popup_text .big {
      font-size: 16px;
  }
  
  &lt;body class="big"&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;body class="popup_text.big"&gt;
  </code></pre>
  
  <p>When I do this, the browser seem to ignore <code>.popup_text</code> rule completely and reverts to the css definition for <code>body</code>.  </p>
  
  <p>What is the best way to override the <code>.popup_text</code> rule where I just want to increase the <code>font-size</code> that is used with <code>.popup_text</code>?</p>