Using inline styles

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"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" width="500" height="200">
   <mx:Style>
   Button { 
      fontSize: 10pt; color: Red; 
      fontStyle: italic;
      color: 0x999933;
   }
   </mx:Style>
   <mx:Button label="Inset border"></mx:Button>
   <mx:Button color="0x999933" label="New Color"></mx:Button>
</mx:Application>

If you set a style property inline, you cannot override it with any other styles. For example, if you declare a button with a color red (<mx:Button id="btn1" color="0x999933"/>, you cannot override it with a setStyle() method on the button instance (btn1.setStyle("color","0x999933";)).

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 either font-size or fontSize in an <mx:Style> declaration, but you must set it as fontSize in a tag definition:

<mx:Style>
   Button { font-size: 15; }
   SimpleButton { fontSize: 15; }
</mx:Style
<mx:Button fontSize="15" label="My Button"/>

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

<mx:Button id="btn1" label="Click 1" color="0x9966CC"/> 
<mx:Button id="btn2" label="Click 2" color="Yellow"/>

Version 1.5

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00000563.htm

Add Comment