title: How to change font size in JSF page
body: <p>I have this simple JSF table which is use to display data from Database and also to edit data.</p>
  
  <pre><code>&lt;table&gt;
      &lt;ui:repeat var="ud" value="#{DCProfileTabGeneralController.dcData}"&gt;
  
          &lt;tr&gt;
              &lt;td&gt;Datacenter Type&lt;/td&gt;
              &lt;td&gt;
                  &lt;h:outputText value="#{ud.type}" 
                                rendered="#{not DCProfileTabGeneralController.editable}" /&gt;
                  &lt;h:inputText value="#{ud.type}" rendered="#{DCProfileTabGeneralController.editable}" /&gt;
              &lt;/td&gt;                                    
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Date Added&lt;/td&gt;
              &lt;td&gt;
                  &lt;h:outputText value="#{ud.dateAdded}" 
                                rendered="#{not DCProfileTabGeneralController.editable}" /&gt;
                  &lt;h:inputText styleClass="datepicker" value="#{ud.dateAdded}" rendered="#{DCProfileTabGeneralController.editable}" /&gt;
              &lt;/td&gt;                                    
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Hour Added&lt;/td&gt;
              &lt;td&gt;
                  &lt;h:outputText value="#{ud.hourAdded}" 
                                rendered="#{not DCProfileTabGeneralController.editable}" /&gt;
                  &lt;h:inputText value="#{ud.hourAdded}" rendered="#{DCProfileTabGeneralController.editable}" /&gt;
              &lt;/td&gt;                                    
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Date Deployed&lt;/td&gt;
              &lt;td&gt;
                  &lt;h:outputText value="#{ud.dateDeployed}" 
                                rendered="#{not DCProfileTabGeneralController.editable}" /&gt;
                  &lt;h:inputText styleClass="datepicker" value="#{ud.dateDeployed}" rendered="#{DCProfileTabGeneralController.editable}" /&gt;
              &lt;/td&gt;                                    
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Hour Deployed&lt;/td&gt;
              &lt;td&gt;
                  &lt;h:outputText value="#{ud.hourDeployed}" 
                                rendered="#{not DCProfileTabGeneralController.editable}" /&gt;
                  &lt;h:inputText value="#{ud.hourDeployed}" rendered="#{DCProfileTabGeneralController.editable}" /&gt;
              &lt;/td&gt;                                    
          &lt;/tr&gt;
  
      &lt;/ui:repeat&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Now I want to extend the table in this way. When the Boolean flag is true I want to display the text in 12px. When the Boolean flag is false I want to display the text in 20 px. Is this possible in JSF? </p>