Along with skins, styles define the look and feel of your Flex applications. You can use styles to change the appearance of a single component, or apply them across all components.

When working with custom components, you have several options for how you use styles. You can define your custom components so that they contain no style information at all. That design allows the application developer who is using your component to apply styles to match the rest of their application. For example, if you define a custom component to display text, the application developer can style it to ensure that the font, font size, and font style of your component match the rest of the application.

Alternatively, you might develop a component that you want to deploy with a built-in look so that it is not necessary for application developers to apply any additional styles to it. This type of component might be useful for applications that require a header or footer with a fixed look, while the body of the application has more flexibility in its look.

Or you might develop a custom component by using a combination of these approaches. This type of design lets application developers set some styles, but not others.

For general information on Flex styles, see Using Styles and Themes. For information on creating custom styles, see Custom Style Properties.

Applying styles from the custom component

You can choose to define styles within your MXML component so that the component has the same appearance whenever it is used, and application developers do not have to worry about applying styles to it.

In the definition of your custom component, you define styles by using one or both of the following mechanisms:

• Tag properties
• Class selectors

The following custom component defines a style by using a tag property of the ComboBox control:

<?xml version="1.0"?>
<!-- mxml/myComponents/StateComboBoxWithStyleProps.mxml -->

<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    openDuration="1000" 
    fontSize="15">

    <mx:dataProvider>   
        <mx:Array>
            <mx:String>AK</mx:String>
            <mx:String>AL</mx:String>
        </mx:Array>
    </mx:dataProvider>
</mx:ComboBox>

Alternatively, you can define these styles by using a class selector style declaration, as the following example shows:

<?xml version="1.0"?>
<!-- mxml/myComponents/StateComboBoxWithStyleClassSel.mxml -->

<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" styleName="myCBStyle">

    <mx:Style>
        .myCBStyle {
            openDuration : 1000;
            fontSize : 15;
            }
    </mx:Style>

    <mx:dataProvider>   
        <mx:Array>
            <mx:String>AK</mx:String>
            <mx:String>AL</mx:String>
        </mx:Array>
    </mx:dataProvider>
</mx:ComboBox>

Application developers can apply additional styles to the component. For example, if your component defines styles for the open duration and font size, application developers can still specify font color or other styles. The following example uses StateComboBoxWithStyleProps.mxml in an application and specifies the font color style for the control:

<?xml version="1.0"?>
<!-- mxml/MainStyleWithPropsAddColor.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">

    <MyComp:StateComboBoxWithStyleProps color="red"/>
    
</mx:Application>
The executing SWF file for the previous example is shown below:

Applying styles from the referencing file

When you reference an MXML component, the referencing file can specify style definitions to the MXML component by using the following mechanisms:

• Tag properties
• Class selectors
• Type selectors

The styles that application developers can apply correspond to the styles supported by the root tag of the MXML component. The following example uses a tag property to set a style for the custom MXML component:

<?xml version="1.0"?>
<!-- mxml/MainStyleWithPropsOverrideOpenDur.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">

    <MyComp:StateComboBoxWithStyleProps openDuration="1000"/>
    
</mx:Application>
The executing SWF file for the previous example is shown below:

When you specify styles as tag attributes, those styles override any conflicting styles set in the definition of the MXML component.

You can use a class selector to define styles. Often you use a class selector to apply styles to specific instances of a control, as the following example shows:

<?xml version="1.0"?>
<!-- mxml/MainStyleOverrideUsingClassSel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">

    <mx:Style>
        .myStateComboBox {
            openDuration : 1000;
        }
    </mx:Style> 

    <MyComp:StateComboBoxWithStyleProps styleName="myStateComboBox"/>
    <mx:ComboBox>
        ...
    </mx:ComboBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you use the styleName property in the tag definition of an MXML component to apply styles to a specific instance of the MXML component. However, those styles are not applied to the ComboBox control defined in the main application file, nor would they be applied to any other instances of StateComboBox.mxml unless you also specify the styleName property as part of defining those instances of the MXML component.

When you specify any styles by using a class selector, those styles override all styles that you set by using a class selector in the MXML file. Those styles do not override styles that you set by using tag properties in the MXML file.

You can also use a type selector to define styles. A type selector applies styles to all instances of a component, as the following example shows:

<?xml version="1.0"?>
<!-- mxml/MainStyleOverrideUsingTypeSel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">

    <mx:Style>
        StateComboBoxWithStyleProps {
            openDuration : 1000;
        }
    </mx:Style> 

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

In this example, the type selector specifies the openDuration style for all instances of the StateComboBox control in the application. When you specify any styles by using a type selector, those styles override all styles that you set by using a class selector in the MXML file. Those styles do not override styles that you set by using tag properties in the MXML file.

Applying a type selector to the root tag of a custom component

All custom components contain a root tag that specifies the superclass of the component. In the case of StateComboBox.mxml, the root tag is <mx:ComboBox>. If you define a type selector for the ComboBox control, or for a superclass of the ComboBox control, in your main application file, that style definition is also applied to any custom component that uses a ComboBox control as its root tag, as the following example shows:

<?xml version="1.0"?>
<!-- mxml/MainStyleOverrideUsingCBTypeSel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">

    <mx:Style>
        ComboBox {
            openDuration: 1000;
            fontSize: 15;
            color: red;
        }
    </mx:Style> 

    <MyComp:StateComboBoxWithStyleProps/>
    <mx:ComboBox/>

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

In this example, all ComboBox controls and all StateComboBox.mxml controls have an openDuration of 1000 ms, fontSize of 15 points, and red text.

If you define a type selector for a superclass of the custom control and for the custom control itself, Flex ignores any conflicting settings from the type selector for the superclass, as the following example shows:

<?xml version="1.0"?>
<!-- mxml/MainStyleOverrideUsingCBTypeSelConflict.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">

    <mx:Style>
        ComboBox {
            color: red;
            openDuration: 1000;
            fontSize: 15;
        }
        StateComboBoxWithStyleProps {
            color: green;
        }
    </mx:Style> 

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

In this example, the StateComboBox control uses green text, and the values for the fontSize and openDuration styles specified in the type selector for the ComboBox control.

Applying styles from a defaults.css file

Flex includes a global style sheet, named defaults.css, inside the framework.swc file in the /frameworks/libs directory. This global style sheet contains style definitions for the global class selector and type selectors for most Flex components. Flex implicitly loads the defaults.css file and applies it to all Flex applications during compilation.

One of the most common ways for you to distribute your custom MXML and ActionScript components is to create a SWC file. A SWC file is an archive file of Flex components that make it easy to exchange components among Flex developers. You need to exchange only a single file, rather than the MXML or ActionScript files, images, and other resource files. The SWF file inside a SWC file is compiled, which means that the code is hidden from casual view.

For more information about SWC files, see Using the Flex Compilers and Building Projects.

A SWC file can contain a local style sheet, named defaults.css, that contains the default style settings for the custom components defined within the SWC file. When Flex compiles your application, it automatically applies the local defaults.css to the components in your SWC file. In this way, you can override the global defaults.css style sheet with the local version in your SWC file.

The only requirements on the local version are:

• You can include only a single style sheet in the SWC file.
• The file must be named defaults.css.
• The file must be in the top-most directory of the SWC file.

For example, you define a custom ComboBox control, named StateComboBox.mxml, as the following example shows:

<?xml version="1.0"?>
<!-- StateComboBox.mxml -->
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:dataProvider>
        <mx:String>AK</mx:String>
        <mx:String>AL</mx:String>
        <!-- Add all other states. -->
        </mx:dataProvider>
</mx:ComboBox>

Notice that this control does not define any style settings.

Then you create a defaults.css file in the same directory to define the default style settings for the custom component, as the following example shows:

StateComboBox
{
    arrowButtonWidth: 40;
    cornerRadius: 10;
    fontSize: "14";
    fontWeight: "bold";
    leading: 0;
    paddingLeft: 10;
    paddingRight: 10;
}

To create the SWC file, you run the compc command-line compiler from the directory that contains the defaults.css and StateComboBox.mxml files. Use the include-file option to specify the style sheet, as the following example shows:

flex_install_dir\bin\compc -source-path . 
    -include-classes StateComboBox 
    -include-file defaults.css defaults.css 
    -o MyComponentsSWC.swc

This example creates a SWC file named MyComponentsSWC.swc.

Then you write an application, named DefaultCSSApplication.mxml, that uses the StateComboBox control, as the following example shows:

<?xml version="1.0"?>
<!-- styles/DefaultCSSApplication.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="*">

    <mx:Label text="Custom MXML component using defaults.css from SWC file."/>
    <MyComp:StateComboBox/>

    <mx:Label text="Default ComboBox control using the default defaults.css file."/>
    <mx:ComboBox>
        <mx:dataProvider>
            <mx:String>AK</mx:String>
            <mx:String>AL</mx:String>
        </mx:dataProvider>
    </mx:ComboBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

Notice that you include a namespace definition for the StateComboBox control in DefaultCSSApplication.mxml to reference the component. Because the MXML component is in the top-most directory of the SWC file, its package name is blank, and you reference it by using a namespace definition of xmlns:MyComp="*".

To compile an application that uses MyComponentsSWC.swc, copy MyComponentsSWC.swc to the directory that contains the application. Then add the SWC file to the Library Path in Adobe® Flex® Builder™, or use the -library-path option to the mxmlc command-line compiler, as the following example shows:

flex_install_dir\bin\mxmlc 
    -file-specs DefaultCSSApplication.mxml 
    --library-path+=.

In the previous example, the defaults.css file and the component file were in the same directory. Typically, you place components in a directory structure, where the package name of the component reflects the directory location of the component in the SWC file.

In the next example, you put the StateComboBox.mxml file in the myComponents subdirectory of the SWC file, where the subdirectory corresponds to the package name of the component. However, defaults.css must still be in the top-level directory of the SWC file, regardless of the directory structure of the SWC file. You compile this SWC file by using the following command line:

flex_install_dir\bin\compc -source-path . 
    -include-classes myComponents.StateComboBox 
    -include-file defaults.css defaults.css 
    -o MyComponentsSWC.swc

To use the StateComboBox.mxml component in your application, you define DefaultCSSApplication.mxml as the following example shows:

<?xml version="1.0"?>
<!-- styles/DefaultCSSApplicationSubDir.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">

    <mx:Label text="Custom MXML component using defaults.css from SWC file."/>
    <MyComp:StateComboBox/>

    <mx:Label text="Default ComboBox control using the default defaults.css file."/>
    <mx:ComboBox>
        <mx:dataProvider>
            <mx:String>AK</mx:String>
            <mx:String>AL</mx:String>
        </mx:dataProvider>
    </mx:ComboBox>
</mx:Application>

Notice that the namespace definition for the StateComboBox control in DefaultCSSApplication.mxml includes myComponents.* to match the directory structure, and package name, of the component in the SWC file.

You can modify and test your defaults.css file without having to recreate the SWC file by using the -defaults-css-files option to the compiler. The CSS files added by the -defaults-css-files option have a higher precedence than those in SWC files, so that they can override a corresponding definition in a SWC file.

When you are done modifying the defaults.css file, recreate the SWC file with the updated defaults.css file.