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 style.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/style.css"/>
<mx:Button id="myButton" label="Click Here"/>
</mx:Application>
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.
