Identify ADF Skinning css style class

We often have requirement to customize the ADF component style class For example ,customize font color and size of panelbox header.

When we inspect the panelbox header in browser by doing inspect element on component we get classes  as shown in below screenshot which are not useful and not what developer is looking for .

Add below context parameter in web.xml file and set param-value to true

<context-param>

        <description>If this parameter is true, there will be an automatic check of the modification date of your JSPs, and saved state will be discarded when JSP's change. It will also automatically check if your skinning css files have changed without you having to restart the server. This makes development easier, but adds overhead. For this reason this parameter should be set to false when your application is deployed.</description>

        <param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>

        <param-value>true</param-value>

  </context-param>

Run the application again and see how the actual style class shows up as below.Now you can use these in ADF skinning css file to change the font color ,size etc.