We style the UI with the help of the CSS library Pure provided by Yahoo. We only use Pure's basic styles, which include the browser style normalization of normalize.css, and its styles for forms. In addition, we define our own style rules, as for in the case of table element and for error messages in style.css.

Adding the Yahoo CSS library to our HTML5 requires to edit the WebContent/WEB-INF/templates/page.xhtml file and add the style element referencing the online CSS file:

<h:head>
  <title><ui:insert name="title">Public Library</ui:insert></title>
  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css" />
</h:head>

Following the same procedure, our custom CSS file is added :

<h:head>
  <title><ui:insert name="title">Public Library</ui:insert></title>
  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css" />
  <link href="#{facesContext.externalContext.requestContextPath}/resources/css/style.css" rel="stylesheet" type="text/css" />
</h:head>

The facesContext.externalContext.requestContextPath expression allows, via JSF, to get the path to WebContent folder. Our CSS file is named style.css and is located in the WebContent/resources/css folder.

Specific CSS classes can be applied to JSF view elements (e.g., h:form), by using the @styleClass attribute. For example, using styleClass="pure-form pure-form-aligned" the YUI pure-form and pure-form-aligned CSS classes are applied to the resulting HTML form element:

<h:form id="createBookForm" styleClass="pure-form pure-form-aligned">
  ...
</hform>