JavaServer Faces (JSF) technology is a Java standard web technology that makes it easy to create web applications. Cascading Style Sheets (CSS) is a W3C technology that has been around for some time, but has recently gained momentum because modern browsers now support it.

JSF has support for CSS, which provides synergy between the two technologies (http://java.sun.com/j2ee/javaserverfaces/). In this article, I describe the hooks for CSS built into JSF, which lets you easily control the visual appearance of your JSF web applications.

Style Sheets

In the Bad Old Days, HTML pages contained both the actual text content of the page, as well as all kinds of formatting, color, and font settings, using the <font> tag, bgcolor attribute, and so on. This made it really hard to maintain the pages if the visual style of the site needed to change. It also made it hard for users to override the font and color choices to display a larger font size, and so on.

CSS lets you move all style information out from the page and into a separate style sheet. In addition to removing the maintenance burden, it offers faster page downloads (because style sheets can be cached by browsers and are typically shared for a number of pages), and the style-sheet language makes it easier to express global style preferences. For example, rather than having to add a <font size="+2"> tag around every heading in your document to make headings larger, you can write a single style rule that applies this change globally..<>