Flex StyleSheets

StyleSheets define Styles for Flex components and are defined in project .css files or inline in MXML.

Defining StyleSheets using <mx:Style> in MXML

The <mx:Style>> element in an MXML file allows the definition of an inline StyleSheet. Its use is very similar to a <style> element in an HTML file.

Below is an example of a using the <mx:Style>> element in an MXML file:

   <mx:Style>
      /* Set every button to have a font size of 15 pixels and bold. */
      Button {
         font-size: 15px;
         font-weight: bold;
      }
      
      /* Set components using the 'highlight' styleName to have a yellow background. */
      .highlight {
         background-color: #FFFF00;
      }
   </mx:Style>

The above defines two style declarations, "Button" and ".highlight". The "Button" style applies to all button controls. The ".highlight" style is applied to all controls that specify a "highlight" styleName.

The <mx:Style element can also be used to reference an external StyleSheet file via the source attribute.

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

The above example references a style.css file in your Flex project but external to the MXML file.

Loading StyleSheets at Run-time

Before you can load a style sheet at run-time, you must compile the CSS file into a SWF file.

Compiling CSS Files to a SWF

Flex Builder allows you to designate that a project CSS file should be compiled to a SWF file (for run-time loading).

1. Right click on a .css file in your Flex project
2. Select Compile CSS to SWF

Now the .css file will be compiled to a .swf file when your project is built. Thus it should appear in your projects bin-debug directory and in the bin-release directory when you create a release build.

Loading a SWF Style Sheet

You load CSS-based SWF files at run-time by using the mx.styles.StyleManager loadStyleDeclarations() method.

ActionScript to load a SWF style sheet:

   // load a style sheet .swf from the project's asset directory
   StyleManager.loadStyleDeclarations( "assets/DefaultStyles.swf" );

The argument passed to loadStyleDeclarations() is a URL (relative or absolute).

Learn more about the StyleManager class...

Related Links:

• Styles in Flex
• StyleManager
• StyleManager ActionScript class