Now that you know how to write and use contracts, you can try to play around with this great feature for creating different kinds of styles/themes for your pages. Most of the time, creating cool themes involves two things: having a cool and flexible templating mechanism and having solid knowledge of CSS and JS.
For example, we can try to write two cool themes for the JSF tables. First, we'll define two contracts named tableBlue and tableGreen. The XHTML template, in both the cases, will have the following code:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title></title>
</h:head>
<h:body>
<h:outputStylesheet name="styles.css"/>
<div...