Adding CSS file in ADF JSF page

I have created jsf page

<f:view>

 <af:document id="d1">
   <f:facet name="metaContainer">
   <af:resource type="css">
     af|inputText :: content
     {
     color:Red;
     }
</af:resource>
  </f:facet>


 <af:form id="f1">
  <af:panelHeader text="Customer" id="ph1">

    <af:selectOneRadio label="Gender"
                       requiredMessageDetail="Must Provide Gender"
                       id="sor1" layout="horizontal"
                       value="#{CustomerBean.gender}" autoSubmit="true">
      <af:selectItem label="Female" value="F" id="si1"/>
      <af:selectItem label="Male" value="M" id="si2"/>
    </af:selectOneRadio>
  </af:panelHeader>
  <af:inputText label="FirstName" id="it1" value="#{CustomerBean.first}"/>
  <af:inputText label="LastName" id="it2" value="#{CustomerBean.last}"/>
  <af:outputText id="ot1"
                 partialTriggers="sor1" value="#{CustomerBean.gender}"/>
</af:form>

I want to apply Red color to all the inputText I am using. We can perform it using CSS. But I am not able to get any output from it. I have also tried

 <f:facet name="metaContainer">
  <af:resource type="css">
     .text-label
     {
     color:Red;
     }
  </af:resource>
  </f:facet>

Another way I tried is :

 <f:facet name="metaContainer">
     <af:resource type="css">
      [id=form\:inputText]{
       color: Red;
      }
     </af:resource>

But it's not working. Please suggest me the proper way to use CSS code in JSF page in ADF.

Solution

You don't use CSS directly in an ADF Faces page, because the components that you use in ADF Faces generate multiple HTML elements. You use Skins. See this video to get started. And this and this. Reading the docs for a new framework is generally a good idea ;-)

You don't say what version you're on - that info helps us help you - but most recent versions have a skin editor built to into JDeveloper or downloadable.

Use the Skin Selectors to set style for the components and sub-components.

Skin files generate the correct CSS file when the page is gen'd and downloaded with the page.