How to change the color of <f:facet> header?

Exactly, how can I do this? Tried:

<f:facet id="form" name="header" class="customHeader">
   <h:outputText value="HELLO!"/>
</f:facet>

and my CSS:

.customHeader th{
    background-color:  activeborder;
    background-image: none;
}

I remebered to include CSS file into JSF page:

<link type="text/css" ref="stylesheet" href="./newcss.css"/>

But no result, I cant change the header color, I simply does not see any change. Any help?

Heres the generated HTML code:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
        <title>Facelet Title</title>
        <link type="text/css" 
              ref="stylesheet" 
              href="./newcss.css" />
    </head
    ><body>
        <form id="j_idt5" 
              name="j_idt5" 
              method="post" 
              action="/HTableJSF/faces/newjsf.xhtml" 
              enctype="application/x-www-form-urlencoded">
            <input type="hidden" name="j_idt5" value="j_idt5" />
            <table style="background-color: black">
                <thead>
                    <tr>
                        <th colspan="1" scope="colgroup">HELLO!</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <span class="row1">HELLO</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <input type="hidden" 
                   name="javax.faces.ViewState" 
                   id="j_id1:javax.faces.ViewState:0" 
                   value="-3603525257247985306:-5087066467544098625" 
                   autocomplete="off" />
        </form>
    </body>
</html>

Solution

You can set headerClass on h:column :

<h:column headerClass="customHeader">
    <f:facet name="header">
        HELLO!
    </f:facet>
</h:column>

In this case for specific columns <th class="customHeader"> will be generated.

So, you need to change css selector. Either remove th:

.customHeader {/**/}

or change it from descendant to element.class

th.customHeader {/**/}