This section overviews main principles of standard components skinning with the Rich Faces framework.

This feature provides styling for standard HTML form elements in order to be highly compilant with RichFaces common look'n'feel. There should be two ways of applying skins to elements:

- Skinning style classes are applied to elements by element name and type attribute (where applicable). No additional steps are required from an application developer. Application initialization parameter serves for enabling/disabling the feature.
- Several style classes are provided for different types of elements. That style classes have predefined names. Application developer should manually assign classes to controls that need skinning or assign a class to an element that contains controls.

Standard controls skinning feature provides 2 levels of skinning:

1. Standard - customization of only basic style properties.
2. Extended - extends basic level introducing customizations of a broader number of style properties

Skinning level is calculated automatically at server side depending on user agent info.

NOTE:Extended skinning is not applied to browsers with rich visual styling for controls (e.g. Opera and Safari). Also advanced level of skinning requires support of CSS 2 attribute selectors either as implicit type attributes for button/textarea elements (e.g. IE7 in standards compilant mode) or CSS 3 draft namespace selectors (e.g. Mozilla Firefox).

Here is the skinned form example. Note there is no styling in sources of that form

Standard components skinning All the controls below is just standard JSF components skinned with Rich Faces:

There three ways of applying skinning to application:

- By default org.richfaces.ENABLE_CONTROL_SKINNING context param is set to true and it means that all standard elements on the page will be skinned. (CSS style classes for elements based on their names and type attribute values will be applied). You may redefine it to disable in order to turn it off.
- By default org.richfaces.ENABLE_CONTROL_SKINNING_CLASSES context param is set to false and it means that basic elements nested to element having rich-container class will be skinned. It could be also turned off using disable value.
- RichFaces also provides predefined classes which can be applied by an end developer to elements need to be skinned separately. This classes added to the page also according to org.richfaces.ENABLE_CONTROL_SKINNING_CLASSES context-param.

To get a better idea of standard component skinning we recommend to explore CSS files located in ui/core/ui/src/main/resources/org/richfaces/ folder of RichFaces svn.