Type Selectors, Class Selectors and Global Selectors

Type Selector

If the selector parameter does not start with a period, the returned CSSStyleDeclaration is a type selector and applies to all instances of that type. For example, the type selector “Button” applies to all instances of Button and its subclasses

Examples of type selector

Button

{
color: #FFFFFF
cornerRadius: 10;
}

The above style applied is reflected in all the instances of the Button

Important things to note about type selector

When you set a new CSSStyleDeclaration on a type selector, you are replacing the entire existing type selector with your own selector. All style properties that you do not explicitly define in the new CSSStyleDeclaration are set to null. This can remove skins, margins, and other properties that are defined in the defaults.css file or other style sheet that you may have applied already.

Class Selector

If the selector parameter starts with a period (.), the returned CSSStyleDeclaration is a class selector and applies only to those instances whose styleName property specifies that selector (not including the period). For example, the class selector “.bigMargins” applies to any UIComponent whose styleName is “bigMargins”.

Example of a Class selector
.myButtonStyle {
color: red;
cornerRadius: 10;
}

Important things to note about type selector

You can use a class selector to apply the new CSSStyleDeclaration object. Because a class selector’s style properties do not replace existing type selector properties, the components maintain their default settings

Global Selector

The global selector is similar to a type selector and does not start with a period
Global style applies to all controls.
StyleManager.getStyleDeclaration(“global”).
setStyle(“fontStyle”,”italic”);