title: PrimeFaces overrides my custom CSS style
body: <p>I am trying to create PrimeFaces <strong>commandButtons</strong> of different colors.   In my stylesheet I have something like this:</p>
  
  <pre><code>.styleGreen {    
      background-color: #009900;
      font-family: Arial,Helvetica,sans-serif;
  }
  </code></pre>
  
  <p>And the component like this:</p>
  
  <pre><code> &lt;p:commandButton value="Green Button" styleClass="styleGreen" ...
  </code></pre>
  
  <p>This works when the <strong>commandButton</strong> is <em>not</em> inside a PrimeFaces <strong>panel</strong> or some other container.  But when I move it into the body of my page, all the custom CSS rules are overridden.  </p>
  
  <p>What is the right way of fixing this?</p>