title: Styling Accordion Headers in Flex 4.5 with CSS
body: <p>I'm trying to style the Accordion headers using CSS and the <code>headerStyleName</code> property in Flex 4.5, but the CSS styles are not displaying. The accordion headers appear the same as the default style. Here's my current code.</p>
  
  <p>Accordion.css:</p>
  
  <pre><code>.accHeader {
      fillColors: #dbf6c6, #e1facd;
      fillAlphas: 1.0, 0.5;
  }
  </code></pre>
  
  <p>MXML code from the component (not the main application):</p>
  
  <pre><code>...
  &lt;fx:Style source="skins/Accordion.css" /&gt;
  &lt;mx:Accordion left="0" right="0" top="0" bottom="0" id="geo_accordion"
                        openDuration="500" headerStyleName="accHeader"&gt;
  ...
  </code></pre>
  
  <p>I've also tried embedding the CSS inside the style tag instead of linking to an external CSS file, but the results are the same.</p>
  
  <p>Also, if I change a different CSS property, such as <code>color</code>, the change is correctly displayed.</p>
  
  <p>I know about the <code>chromeColor</code> property as well, but it is the not the look I'm trying to achieve. I'm also not completely set on using CSS, so if there another better way to achieve a customizable Accordion header, I'm all for it. I was initially going to make a skin, but stopped when I didn't see the correct host component in the New MXML Skin dialog.</p>
  
  <p>Any information to point me in the right direction would be very much appreciated. Thank you for your time!</p>