Each row in our panel grid consists of an <h:outputLabel> tag, an input field, and
an <h:message> tag.
The columnClasses attribute of <h:panelGrid> allows us to assign CSS styles to
each column inside the panel grid. Its value attribute must consist of a comma-
separated list of CSS styles (defined in a CSS style sheet). The first style will be
applied to the first column, the second style will be applied to the second column,
the third style will be applied to the third column, and so on. Had our panel grid had
more than three columns, then the fourth column would have been styled using the
first style in the columnClasses attribute, the fifth column would have been styled
using the second style in the columnClasses attribute, and so on.
If we wish to style rows in a panel grid, we can do so with its rowClasses attribute,
which works the same way that the columnClasses works for columns.
Notice the <h:outputStylesheet> tag inside <h:head> near the top of the page.
This tag was introduced in JSF 2.0. One feature JSF 2.0 brought to the table is
can be placed under a top-level directory named resources , and JSF tags will have
access to those resources automatically. In our NetBeans project, we need to place the
resources directory under the Web Pages folder.
Then, we need to create a subdirectory to hold our CSS style sheet (by convention, this
directory should be named css ). We place our CSS style sheet(s) in this subdirectory.
The CSS style sheet for our example is very simple; therefore, it is not
shown. However, it is part of the code bundle for this chapter.
The value of the library attribute in <h:outputStylesheet> must match the
directory where our CSS file is located, and the value of its name attribute must
match the CSS filename.