Search code examples
htmlcssjsf-2

difference between style and styleClass in jsf page


I have started working with a java code base where style and styleClass keywords are used to style the different elements in the jsf page. The project is using jsf 2.2.

The 'style' keyword is used to apply html attributes like:

<h:panelGroup style="margin-top:60px">
</h:panelGroup>

where as 'styleClass' keyword is used to apply the classes/styles from the .css file like:

<h:panelGroup layout="block" styleClass="panel panel-default">    
</h:panelGroup>

So my question is, is there a rule for which keyword is used where or is it just a matter of choice in this case? From this link I don't understand any difference between the two keywords.


Solution

  • Both attributes are used to define style properties for the component. The styleClass attaches css classes to the component while the style attribute is used to define inline style properties that will be applied to the single element.

    this:

    <h:panelGroup style="margin-top:60px">
    </h:panelGroup>
    

    would generate the following HTML:

    <span style="margin-top: 60px"></span>
    

    Note that it is a span HTML element because the panelGroup renders a span by default.

    while

    <h:panelGroup layout="block" styleClass="panel panel-default">    
    </h:panelGroup>
    

    would generate:

    <div class="panel panel-default"></div>
    

    This is basic HTML knowledge anyway has not much to do with JSF except for the naming (i.e. style and styleClass)