External style sheets -- Flex 2.01

Use CSS to apply styles to a document or across entire applications. You can point to a style sheet without invoking ActionScript. This is the most concise method of applying styles, but can also be the least flexible. Style sheets can define global styles that are inherited by all controls, or individual classes of styles that only certain controls use.

The following example applies the external style sheet myStyle.css to the current document:

<mx:Style source="myStyle.css"/>

Flex includes a global style sheet, defaults.css, inside the framework.swc file. This file contains style definitions for the global class selector, and type selectors for most Flex components. For more information about defaults.css, see About the default style sheet.

Flex also includes several other style sheets that each have a unique look and feel. For more information, see About the included theme files.

Local style definitions

Use the <mx:Style> tag to define styles that apply to the current document and its children. You define styles in the <mx:Style> tag using CSS syntax and can define styles that apply to all instances of a control or to individual controls. The following example defines a new style and applies it to only the myButton control:

<?xml version="1.0"?>
<!-- styles/ClassSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .myFontStyle { 
        fontSize: 15;
        color: #9933FF;
     }
  </mx:Style>
  <mx:Button id="myButton" styleName="myFontStyle" label="Click Here"/>
</mx:Application>

The following example defines a new style that applies to all instances of the Button class:

<?xml version="1.0"?>
<!-- styles/TypeSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     Button { 
        fontSize: 15;
        color: #9933FF;
     }
  </mx:Style>
  <mx:Button id="myButton" label="Click Here"/>
</mx:Application>

StyleManager class

Use the StyleManager class to apply styles to all classes or all instances of specified classes. The following example sets the fontSize style to 15 and the color to 0x9933FF on all Button controls:

<?xml version="1.0"?>
<!-- styles/StyleManagerExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  
  <mx:Script><![CDATA[
     public function initApp():void {
        StyleManager.getStyleDeclaration("Button").setStyle("fontSize",15);
        StyleManager.getStyleDeclaration("Button").setStyle("color",0x9933FF);
     }
  ]]></mx:Script>

  <mx:Button id="myButton" label="Click Here"/>
</mx:Application>

You can also use the CSSStyleDeclaration object to build run time style sheets, and then apply them with the StyleManager's setStyleDeclaration() method.

getStyle() and setStyle() methods

Use the setStyle() and getStyle() methods to manipulate style properties on instances of controls. Using these methods to apply styles requires a greater amount of processing power on the client than using style sheets but provides more granular control over how styles are applied.

The following example sets the fontSize to 15 and the color to 0x9933FF on only the myButton instance:

<?xml version="1.0"?>
<!-- styles/SetStyleExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  
  <mx:Script><![CDATA[
     public function initApp():void {
        myButton.setStyle("fontSize",15);
        myButton.setStyle("color",0x9933FF);
     }
  ]]></mx:Script>

  <mx:Button id="myButton" label="Click Here"/>
</mx:Application>

Inline styles

Use attributes of MXML tags to apply style properties. These properties apply only to the instance of the control. This is the most efficient method of applying instance properties because no ActionScript code blocks or method calls are required.

The following example sets the fontSize to 15 and the color to 0x9933FF on the myButton instance:

<?xml version="1.0"?>
<!-- styles/InlineExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Button id="myButton" color="0x9933FF" fontSize="15" label="Click Here"/>
</mx:Application>

In an MXML tag, you must use the camel-case version of the style property. For example, you must use "fontSize" rather than "font-size" (the CSS convention) in the previous example. For more information on style property names, see About property and selector names.

As with other style properties, you can bind inline style properties to variables.