Flex Cascading Style Sheets example

Following code demonstrates the use of <mx:Style> tag. Style definitions of this tag are implemented on other GUI components like on Button controls. This implementation is done by using the class selector, here class selector is used with name Alexander.

Like other flex components id attribute, class selector is the id attribute of style tag and acts as its identifier. Under the tag, style statements for the flex components are coded. Further the features defined through the statements are invoked in the components mostly in containers with the styleName property.
In the example below styles are implemented on flex Button and Combo box controls.

cascade.mxml

<?xml version = '1.0' encoding = 'utf-8'?>

<mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml'>

  

  <mx:Style>

  .Alexander {color : green}

  Button {font-size: 10pt}

  </mx:Style>

  

  <mx:Button label = 'Motorist' styleName = 'Alexander'/>

  

  <mx:ComboBox id = 'combo' styleName = 'Alexander'>

  <mx:Button label = 'Teacher'/>

  <mx:Button label = 'Central Park carriage driver'/>

  <mx:Button label = 'Flower store worker'/>

  </mx:ComboBox>

  

</mx:Application>

cascade.swf

Download the code

Flex Cascading Style Sheets example

Flex Cascading Style Sheets example

Flex Cascading Style Sheets example

Tutorials