Posts Tagged ‘Example of External Skinning’

External style sheets in Flex4 or FlashBuilder 4

January 28th, 2011 by aabhaanjan

style_css

In flex we can use external style sheet. We can choose a CSS file and set the properties of components in it by calling the  style sheet into the main application.

Example:

Test.mxml

[xml]

<?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 source=”MyCSS.css”/>

<s:Button id=”btn”  label=”Example of External Skinning”

styleName=”button”

x=”103″ y=”28″ width=”483″ height=”89″/>

</s:Application>

[/xml]

MyCSS.css

[xml]

/* CSS file */

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

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

.button{

font-family:”Verdana”;

font-size:14px;

text-align:center;

color:#FF3300;

font-weight:bold;

}

[/xml]

Tags: , , ,