Adobe Flex 3 Help

Using external style sheets

Flex supports external CSS style sheets. You can declare the location of a local style sheet or use the external style sheet to define the styles that all applications use. To apply a style sheet to the current document and its child documents, use the source property of the <mx:Style> tag.

Note: You should try to limit the number of style sheets used in an application, and set the style sheet only at the top-level document in the application (the document that contains the <mx:Application> tag). If you set a style sheet in a child document, unexpected results can occur.

The following example points to the MyStyleSheet.css file in the flex_app_root/assets directory:

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

    <mx:Style source="../assets/SimpleTypeSelector.css"/>

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

</mx:Application>

The executing SWF file for the previous example is shown below:

The value of the source property is the URL of a file that contains style declarations. When you use the source property, the contents of that <mx:Style> tag must be empty. You can use additional <mx:Style> tags to define other styles. Do not add <mx:Style> tags to your included file; it should follow standard CSS file syntax.

The external style sheet file can contain both type and class selectors.

If you are using Adobe® Flex® Builder™, you can generate style sheets from existing component definitions by using the Convert to CSS button in the Style pop-up menu in the Flex Properties view. You can export a custom style sheet for a single component type or class of components, or use that component's style properties to create a global style sheet. For more information, see Using the CSS editor in Design mode.

You can also compile CSS files into SWF files and load them at run time. For more information, see Loading style sheets at run time.

You can specify a CSS file as an argument to the source-path compiler argument. This lets you toggle among style sheets with that compiler argument.

About the default style sheet

Flex includes a default style sheet that is used across all applications. This style sheet applies a consistent style across all Flex components. This file is defaults.css and is located inside the framework.swc file in the /frameworks/libs directory. The programmatic skin classes that it embeds are in the mx.skins.halo package. The graphical skins that it uses are also in the framework.swc file.

This default style sheet makes up the Halo theme. For more information, see About themes.

Flex implicitly loads the defaults.css file and applies it to the Flex application during compilation. You can explicitly point to another file for the default styles by using the defaults-css-url compiler option. You can also rename the defaults.css file or remove it from the framework.swc file to disable it.

The defaults.css file defines the look and feel for all Flex components. If you apply additional themes or CSS files to your application, Flex still uses the styles in defaults.css, but only for the components that your custom styles do not override. To completely eliminate the default theme from Flex, you must remove or override all styles defined in defaults.css.

Flex also includes other style sheets that let you apply a theme quickly and easily. For more information, see About the included theme files.