The following table illustrates how tags will be laid out inside an <h:panelGrid>
Each row in our <h:panelGrid> 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 stylesheet). 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, so on and so forth. 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, so on and so forth.
If we wish to style rows in an <h:panelGrid> , 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
is a new tag that was introduced in JSF 2.0. One new feature that JSF 2.0 brings to the
files, images, and so on, 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.
We then need to create a subdirectory to hold our CSS stylesheet (by convention,
this directory should be named css ), then we place our CSS stylesheet(s) on this