title: Primefaces styling component class with CSS
body: <p>How can I change properties of component using CSS?</p>
  
  <p>Let's say I have two buttons: </p>
  
  <pre><code>&lt;p:commandButton id="mySmallButton" styleClass="smallButton"&gt;
  &lt;p:commandButton id="myButton"&gt;
  </code></pre>
  
  <p>I want all my buttons to have <code>font-size: 14px;</code> so I added this rule:</p>
  
  <pre><code>.ui-button .ui-button-text{
     font-size:14px;
  }
  </code></pre>
  
  <p>But my <strong>smallButton</strong> should have different size, so I added:</p>
  
  <pre><code>.smallButton{
     font-size:11px;
  }
  </code></pre>
  
  <p>Unfortunatelly this doesn't work. This is produced HTML:</p>
  
  <pre><code>&lt;button class="ui-button ui-widget ui-state-default ui-corner-all
      ui-button-text-only smallButton" (...)&gt;
      &lt;span class="ui-button-text ui-c"&gt;MY TEXT&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>The text on this button is stil 14px size. How should CSS look like to have all my <strong>smallButton</strong> <code>font-size: 11px</code> ?</p>