Menu
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.
283
The style and styleClass attributes allow you to specify Cascading Style Sheets (CSS) styles for the rendered output of your tags.
The attribute style in JSF is equivalent to attribute style in HTML. The attribute styleClass in JSF is equivalent to attribute class in HTML. Thanks for contributing an answer to Stack Overflow!
These attributes allow you to use your own styles and style classes to control the look and feel of the resulting HTML. style allows you to set styles directly on a component, while styleClass lets you attach classes for styles defined elsewhere. For example, the following code sets the class of the <apex:outputText > and applies a style.
The styleClass is simply converted as class in the rendered HTML. Show activity on this post. style: If you want ot add any CSS with the component then you can put the style as the value of the attribute. Added CSS will be applied on for the component. styleClass: This attribute holds the CSS class name which is defined in the external style sheet.
The latter should only be used if classes “can’t handle it”. For example, style is acceptable if we calculate coordinates of an element dynamically and want to set them from JavaScript, like this: For other cases, like making the text red, adding a background icon – describe that in CSS and then add the class (JavaScript can do that).
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)
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
