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

Take a survey