Posts Tagged ‘style class’

Use of class selectors in CSS and multiple class selectors

March 10th, 2011 by aabhaanjan

A Class selectors define a set of styles (or a class) that we can apply to any component. You define the style class, and then point to the style class using the styleName property of the component’s MXML tag.

Note* : All components that are a subclass of the UIComponent class support the styleName property.

The following example defines a new style myFontStyle and applies that style to a Button component by assigning the Button to the myFontStyle

style class:

[xml]

<?xml version=”1.0″?>

<!– styles/ClassSelector.mxml –>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”>

<fx:Style>

.myFontStyle {

fontSize: 15;

color: #9933FF;

}

</fx:Style>

<s:VGroup>

<s:Button id=”myButton” styleName=”myFontStyle” label=”Click Me”/>

<s:Button id=”myButton2″ label=”Click Me”/>

</s:VGroup>

</s:Application>

[/xml]

we can apply multiple class selectors by separating them with a space in the styleName property.

Note * : The order of preference that the styles is applied is the order in which they appear in the space-delimited list, not the order in which they are defined in the CSS block or external style sheet.

Example :

[xml]

<?xml version=”1.0″?>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”>

<fx:Style>

.myFontStyle {

fontSize: 22;

}

.myOtherFontStyle {

color: #9933FF;

}

</fx:Style>

<s:VGroup>

<s:Button id=”myButton”

styleName=”myFontStyle myOtherFontStyle”

label=”Click Me”/>

<s:Button id=”myButton2″ label=”Click Me”/>

</s:VGroup>

</s:Application>

[/xml]

Tags: , , , , ,