Local style sheets in Flex4

Home Tutorial Flex Flex4 Components Local style sheets in Flex4

Local style sheets in Flex4
Posted on: June 21, 2010 at 12:00 AM

You can set the style of components in tag. You can make a class and set the properties in it.

Local style sheets in Flex4:

You can set the style of components in <fx:Style> tag. You can make a class and set the properties in it. The syntax is following:

<fx:Style>
@namespace namespace_identifiernamespace_string;
selector_name {
style_property: value;
[...]
}
</fx:Style>

You will call the class in component by using styleName property.

Example:

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

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

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

minWidth="955" minHeight="600">

<fx:Style>

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

.button{

font-family:"Verdana";

font-size:16px;

text-align:center;

color:#990000;

font-weight:bold;

button-width:100px;

button-height:50px;

}

.label{

font-family:"Verdana";

font-size:12px;

color:Green;

}

</fx:Style>

<s:Panel title="Local Style Example" width="288" height="182">

<s:Button id="btn"

label="Submit"

styleName="button"

x="85" y="31"/>

<s:Label text="This is a Local style example."

x="34" y="84"

styleName="label"/>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Related Tags for Local style sheets in Flex4:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics