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>
The executing SWF file for the previous example is shown below:

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; /* Note the camelCase. */
        }

        .myOtherFontStyle { 
            font-size: 15; /* Note the hyphen. */
        }
    </mx:Style>

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

    <mx:Button id="myButton2" styleName="myOtherFontStyle" label="Click Me"/>

</mx:Application>
The executing SWF file for the previous example is shown below:

For more information, see About property and selector names.

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>
The executing SWF file for the previous example is shown below:

You can remove an inline style definition by using the clearStyle() method.

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>
The executing SWF file for the previous example is shown below:

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