The <mx:Style> tag contains style sheet definitions that adhere to the CSS 2.0 syntax. These definitions apply to the current document and all children of the current document. The <mx:Style> tag uses the following syntax to define local styles:

<mx:Style>
    selector_name { 
        style_property: value;
        [...]
    }
</mx:Style>

The following example defines a class and a type selector in the <mx:Style> tag:

<?xml version="1.0"?>
<!-- styles/CompoundLocalStyle.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Style>
        .myFontStyle { 
            fontSize: 15;
            color: #9933FF;
        }

        Button {
            fontStyle: italic;
        }
    </mx:Style>

    <mx:Button id="myButton" styleName="myFontStyle" label="Click Me"/>

</mx:Application>
The executing SWF file for the previous example is shown below:

Using the Application type selector

The Application container is the top-most container in a Flex application. Styles defined on the Application type selector that are inheritable are inherited by all of the container's children as well as the container's subclasses. Styles that are not inheritable are only applied to the Application container itself and not its children.

Styles applied with the Application type selector are not inherited by the Application object's children if those styles are noninheritable. To use CSS to apply a noninheritable style globally, you can use the global selector. For more information, see Using the global selector.

When you define the styles for the Application type selector, you are not required to declare a style for each component, because the components are children of these classes and inherit the Application type selector styles.

Use the following syntax to define styles for the Application type selector:

<mx:Style>
    Application { style_definition }
</mx:Style>

You can use the Application type selector to set the background image and other display settings that define the way the Flex application appears in a browser. The following sample Application style definition aligns the application file to the left, removes margins, and sets the background image to be empty:

<?xml version="1.0"?>
<!-- styles/ApplicationTypeSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Style>
        Application {
            paddingLeft: 0px;
            paddingRight: 0px;
            paddingTop: 0px;
            paddingBottom: 0px;
            horizontalAlign: "left";
            backgroundColor: #FFFFFF; /* Change color of background to white. */
            backgroundImage: " "; /* The empty string sets the image to nothing. */
        }
    </mx:Style>

    <mx:Button id="myButton" styleName="myFontStyle" label="Click Me"/>

</mx:Application>
The executing SWF file for the previous example is shown below:

When the background image is set to the empty string, Flex does not draw the default gray gradient.

You can programmatically define values in the Application type selector using the StyleManager class. For more information, see Using the StyleManager class.

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 and textDecoration 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 Me"/>

    <mx:Label id="myLabel" text="This is a label."/> 

</mx:Application>
The executing SWF file for the previous example is shown below:

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 Me"/>

    <mx:Label id="myLabel" text="This is a label."/> 

</mx:Application>
The executing SWF file for the previous example is shown below:

Class selectors, type selectors, and inline styles all override the global selector.