| Flex 2 Developer's Guide > Customizing the User Interface > Using Styles and Themes > Using local style definitions > Using the global selector | |||
Flex includes a global selector that you can use to apply styles to all controls. Properties defined by a global selector apply to every control unless that control explicitly overrides it. Because the global selector is like a type selector, you do not preface its definition with a period in CSS.
The following example defines fontSize, an inheritable property, and textDecoration, a noninheriting property, to the global selector:
<?xml version="1.0"?>
<!-- styles/GlobalTypeSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
global {
fontSize:22;
textDecoration: underline;
}
</mx:Style>
<mx:Button id="myButton" label="Click Here"/>
<mx:Label id="myLabel" text="This is a label"/>
</mx:Application>
You can also use the getStyleDeclaration() method to apply the styles with the global selector, as the following example shows:
<?xml version="1.0"?>
<!-- styles/GlobalTypeSelectorAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp(event)">
<mx:Script><![CDATA[
public function initApp(e:Event):void {
StyleManager.getStyleDeclaration("global").
setStyle("fontSize", 22);
StyleManager.getStyleDeclaration("global").
setStyle("textDecoration", "underline");
}
]]></mx:Script>
<mx:Button id="myButton" label="Click Here"/>
<mx:Label id="myLabel" text="This is a label"/>
</mx:Application>
Class selectors, type selectors, and inline styles all override the global selector.
Flex 2.01