overriding primefaces 3.1 css for datatable - css

Question

I am trying to override the css classes from primefaces 3.1, I was looking for a pattern for the class name to override.
I tried:
.ui-datatable table {}
.ui-datatable .ui-datatable-header,.ui-datatable .ui-datatable-footer {}
.ui-datatable .ui-datatable-header {}
.ui-datatable th,.ui-datatable tfoot td {}
.ui-datatable .ui-datatable-data td,.ui-datatable .ui-datatable-data-empty td{}
But only the rows content got centralized but was not able to change header bgcolor and other stuff.
Then I realized that may be the classes I overwrote might not have been used.
Surprisingly, I found the generated source code are not using these as class...
<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget">
<table role="grid"><thead><tr role="row">
<th id="form:j_id1915418705_722af8cd:j_id1915418705_722af894" class="ui-state-default" role="columnheader">
<div class="ui-dt-c">
<span><span class="outputText">Model</span></span>
</div>
</th>
<th id="form:j_id1915418705_722af8cd:j_id1915418705_722af942" class="ui-state-default" role="columnheader">
<div class="ui-dt-c">
<span><span class="outputText">Color</span></span>
</div>
</th></tr></thead><tfoot></tfoot>
<tbody id="form:j_id1915418705_722af8cd_data" class="ui-datatable-data ui-widget-content">
<tr data-ri="0" data-rk="BMW" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false">
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">BMW</span>
</div>
</td>
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">Black</span>
</div>
</td>
</tr>
<tr data-ri="1" data-rk="Audi" class="ui-widget-content ui-datatable-odd" role="row" aria-selected="false">
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">Audi</span>
</div>
</td>
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">White</span>
</div>
</td>
</tr>
</tbody>
</table><input type="hidden" id="form:j_id1915418705_722af8cd_selection" name="form:j_id1915418705_722af8cd_selection" value="" autocomplete="off" />
Can somebody tell me how to I be able to change table headers, borders, alternate rows color...
Can somebody provide me a pattern for How to know what class in PF to override looking at the generted source code.
Thanks in advance.

Answer 1

First of the classes are included here in the markup:
<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget">
The other child classes automatically apply themselves to the other elements.
Your custom CSS may actually be overridden by the Primefaces CSS styles if you are including these styles in a seperate CSS file linked from head.
To make sure that your custom CSS applies itself to the page try adding the custom CSS inline to the page body and see if it applies then.