Understanding the structural and skinning CSS

Each component is styled with CSS and contains two layers of style information—structural or component-specific and skinning or component-independent styles.

In this recipe, you will understand the difference between these two types of CSS, learn some useful selectors, and see an exemplary styling of the PickList component in the generated HTML.

Getting ready

To learn about different layers of style information, you can go to the PrimeFaces ShowCase (http://primefaces.org/showcase/ui/home.jsf) and look at it in the Firefox browser with an installed Firebug add-on (http://getfirebug.com). Firebug allows live editing, debugging, and monitoring CSS, HTML, and JavaScript in any web page. The add-on can be opened after its installation by navigating to Tools | Web Developer | Firebug or by pressing the F12 key. Another useful tool is built-in Developer Tools for the Google Chrome browser, which is similar to the Firebug.

How to do it...

Go to the...