JSF pages can be styled using cascading stylesheets (CSS), which define rules for styling page elements. This involves both:
Style planning involves determining the visual characteristics of your application's web pages, including:
Once you know the desired contents of a JSF page you first need to identify and name the types of components that need styles. For example, error messages are often rendered in styles that are different than the rest of the components on a page so they are easily recognized.
Style types should be named according to how they are used, not how they appear. For example, a style type name for error messages should be something like error rather than red-font, even if the error message is in a red font, because an error message's appearance is subject to change.
Once identified, style type names can then be used as values for class attributes of plain HTML elements or styleClass attributes of JSF HTML elements.
Cascading style sheets provide a mechanism for separating data in web pages from its presentation, similar to the separation provided by the Model-View-Controller design paradigm:
A cascading style sheet consists of a sequence of CSS rules, each defining a set of style attributes that can be applied to elements in a JSF page. These rules are gathered together into .css files that can be used in several JSF pages.
A CSS rule has the following form:
selector { sequence of declarations }
Each declaration has the following form:
keyword: value;
For example, here is a rule that styles the text used to prompt a user for input:
.prompt { font-size: larger; color: forestgreen; }
Here is a partial list of style keywords and legal values for style attributes. This just scratches the surface of what is available in CSS.
Keyword | Values |
---|---|
color | red, orange, yellow, green, blue, gray, black, white, ... |
background-color | red, orange, yellow, green, blue, gray, black, white, ... |
font-family | monospace, serif, sans-serif, cursive, Times, Helvetica, ... |
font-size | small, medium, large, 14px, ... |
font-weight | normal, bold, lighter, ... |
font-style | normal, italic, oblique |
border | thin solid blue, thick dotted green, 1em dashed yellow ... |
Page components are styled by adding the following attributes to tags that can be styled.
<h1 class="header"> ... </h1>
<h:outputText styleClass="loginError" ... />
<h:message errorClass="error" warnClass="warn" ... />
The class-names should be names used in stylesheet rule selectors.