| Flex 2 Developer's Guide > Customizing the User Interface > Using Styles and Themes > 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 |
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 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.
The external style sheet file can contain both type and class selectors.
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.
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 is uses are also in the framework.swc file.
This default style sheet makes up the Halo theme. For more information about themes, 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.
Flex 2.01
