Question

I have created a page using JSF 2.0. Below is what I have

<h:dataTable id="patentDetailsList" value="#{PersonalInformationDataBean.getAllPatentInfo()}"
             var="patentInfo" bgcolor="#F1F1F1" border="8" cellpadding="5"
             cellspacing="3" width="100%">
    <f:facet name="header">
        <h:outputText value="Patent Information" />
    </f:facet>

    <h:column>
        <f:facet name="header">
            <h:outputText value="ID" />
        </f:facet>
        <h:outputText value="#{patentInfo.personalInfoId}"/>
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Name" />
        </f:facet>
        <h:commandLink value="#{patentInfo.fullName}" action="#{PersonalInformationDataBean.takeMeToAnotherPage('patentss')}">
            <f:setPropertyActionListener target="#{PersonalInformationDataBean.personalInfoId}" value="#{patentInfo.personalInfoId}" />
        </h:commandLink>
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Email ID" />
        </f:facet>
        <h:outputText value="#{patentInfo.emailID}"/>
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Mobile Number" />
        </f:facet>
        <h:outputText value="#{patentInfo.mobileNumber}"/>
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Action" />
        </f:facet>
        <h:commandButton value="Edit" action="#{PersonalInformationDataBean.setEditPersonalInfo()}" onclick="return confirm('Are you sure you want to edit?')">
            <f:setPropertyActionListener target="#{PersonalInformationDataBean.personalInfoId}" value="#{patentInfo.personalInfoId}" />
        </h:commandButton>
        <h:commandButton value="Delete" action="#{PersonalInformationDataBean.deletePersonalInfo()}" onclick="return confirm('Are you sure you want to delete?')">
            <f:setPropertyActionListener target="#{PersonalInformationDataBean.personalInfoId}" value="#{patentInfo.personalInfoId}" />
        </h:commandButton>
    </h:column>
</dataTable>

In css, I have

body {
    font-family: verdana, 'Times New Roman';
    font-size: 15px;
}

a {
    font-family: verdana, 'Times New Roman';
    font-size: 15px;
}

input {
    font-family: verdana, 'Times New Roman';
    font-size: 15px;
}

What is making MAD is, font and size are getting applied to all text and link EXCEPT buttons. Edit and Delete buttons are not coming as others are coming.

Any idea what I am doing wrong?

I know using styleClass I could have done that, however if I do it using styleClass I will have to write everyplace which is MORE work.

Update 1

Generated HTML is

<table id="patentDetailsList" bgcolor="#F1F1F1" border="8" cellpadding="5" cellspacing="3" width="100%">
    <thead>
    <tr><th colspan="5" scope="colgroup">Patent Information</th></tr>
    <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email ID</th>
        <th scope="col">Mobile Number</th>
        <th scope="col">Action</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td><a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt65'),{'patentDetailsList:0:j_idt71':'patentDetailsList:0:j_idt71'},'');return false">Fahim Parkar</a></td>
        <td>[e-mail]</td>
        <td>66991234</td>
        <td><input type="submit" name="patentDetailsList:0:j_idt75" value="Edit" onclick="return confirm('Are you sure you want to edit?')" /><input type="submit" name="patentDetailsList:0:j_idt76" value="Delete" onclick="return confirm('Are you sure you want to delete?')" /></td>
    </tr>
    <tr>
        <td>2</td>
        <td><a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt65'),{'patentDetailsList:1:j_idt71':'patentDetailsList:1:j_idt71'},'');return false">Fahad Parkar</a></td>
        <td>[e-mail]</td>
        <td>88888888</td>
        <td><input type="submit" name="patentDetailsList:1:j_idt75" value="Edit" onclick="return confirm('Are you sure you want to edit?')" /><input type="submit" name="patentDetailsList:1:j_idt76" value="Delete" onclick="return confirm('Are you sure you want to delete?')" /></td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt65'),{'patentDetailsList:2:j_idt71':'patentDetailsList:2:j_idt71'},'');return false">Patent First</a></td>
        <td>[e-mail]</td>
        <td>66991234</td>
        <td><input type="submit" name="patentDetailsList:2:j_idt75" value="Edit" onclick="return confirm('Are you sure you want to edit?')" /><input type="submit" name="patentDetailsList:2:j_idt76" value="Delete" onclick="return confirm('Are you sure you want to delete?')" /></td>
    </tr>
    </tbody>
</table>

Answer 1

Try this

input[type=submit] {
/*Your CSS Goes Here*/
}

/*For text+submit*/
input[type=submit], input[type=text] {
/*Your CSS Goes Here*/
}

/*For Textarea*/

textarea {  /*For All Text Area*/
/* CSS Goes Here */
}

textarea.only_one_textarea {  /*This will apply to thextarea with class .only_one_textarea. See ref 1*/
/* CSS Goes Here */
}

<!--Ref 1-->
<textarea class="only_one_textarea"></textarea>