Understanding 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) 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. Another useful tool is the built-in Developer Tools for the Google Chrome browser, which is similar to the Firebug. Both these tools can be opened by pressing the F12 key.

How to do it…

Go to the PrimeFaces Showcase and choose the PickList component from the left sidebar (the PickList...