Using inline styles -- Flex 2.01

You can set style properties as properties of the component in the MXML tag. Inline style definitions take precedence over any other style definitions. The following example defines a type selector for Button components, but then overrides the color with an inline definition:

<?xml version="1.0"?>
<!-- styles/InlineOverride.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     Button { 
        fontSize: 10pt; 
        fontStyle: italic;
        color: #FF0000;
     }
  </mx:Style>
  <mx:Button label="Button Type Selector Color"/>
  <mx:Button color="0x999942" label="Inline Color"/>
</mx:Application>

When setting style properties inline, you must adhere to the ActionScript style property naming syntax rather than the CSS naming syntax. For example, you can set a Button control's fontSize property as font-size or fontSize in an <mx:Style> declaration, but you must set it as fontSize in a tag definition:

<?xml version="1.0"?>
<!-- styles/CamelCase.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .myFontStyle { 
        fontSize: 15;
     }
     .myOtherFontStyle { 
        font-size: 15;
     }
  </mx:Style>
  <mx:Button id="myButton" styleName="myFontStyle" label="Click Here"/>
  <mx:Button id="myButton2" styleName="myOtherFontStyle" label="Click Here"/>
  <mx:Button id="myButton3" fontSize="15" label="Click Here"/>
</mx:Application>

When setting color style properties inline, you can use the hexadecimal format or the VGA color name, as the following example shows:

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

  <mx:Button id="myButton" themeColor="0x6666CC" color="Blue" label="Click Here"/>

</mx:Application>

You can bind inline style properties to variables, as long as you tag the variable as [Bindable]. The following example binds the value of the backgroundColor property of the HBox controls to the value of the colorValue variable:

<?xml version="1.0"?> 
<!-- styles/PropertyBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[ 
     [Bindable]
     public var colorValue:int = 0x333999;
     
     public function changeHBoxStyle():void {
        colorValue = cp.selectedColor;
     }
  ]]></mx:Script>
  <mx:HBox width="100" height="100" backgroundColor="{colorValue}"/>
  <mx:ColorPicker id="cp" showTextField="true" change="changeHBoxStyle()" selectedColor="0x333999"/>
</mx:Application>

Binding a style property can be a computationally expensive operation. You should only use this method of applying style properties when absolutely necessary.