title: ExtJS: adding CSS
body: <p>I'm new to the web side of things, and am confused how to deal with CSS. (Thankfully), there is little direct manipulation of HTML/CSS when using ExtJS4 so far... so now that I'm in need to change the CSS, I'm having problems.</p>
  
  <p>Specifically, I'm trying to dynamically change the color of accordion header backgrounds.</p>
  
  <p><em>Javascript:</em></p>
  
  <pre><code>    afterrender: function(subForm) {
          subForm.getHeader().getEl().addCls('custom-accordion-hd-valid');
          // this works - so I know it's the right element.
          subForm.getHeader().getEl().setStyle('background', 'hsl(100, 60%, 60%)');
      }
  </code></pre>
  
  <p><em>CSS:</em></p>
  
  <pre><code>// attempt 1
  .custom-accordion-hd-valid {
  background: green;
  }
  
  // attempt 2
  .custom-accordion-hd-valid .x-accordion-hd {
  background: green;
  }
  </code></pre>
  
  <p>So:</p>
  
  <ul>
  <li>setting style via <code>setStyle</code> does work, but it doesn't easily allow me to remove a style</li>
  <li>setting via <code>addCls</code> with CSS <strong>attempt 1</strong> loads the CSS, but it gets overridden by <code>.x-accordion-item</code></li>
  <li>setting via <code>addCls</code> with CSS <strong>attempt 2</strong> fails to load the CSS</li>
  </ul>
  
  <p>Help?</p>