Depois do primeiro post explicando o poder do CSS no Flex e suas boas pratícas, vamos por a mão na massa e criar e aplicar nossa folha de estilo.

Existem algumas maneiras de aplicar o CSS no flex, uma primeira e mais simples, basta alterar as propriedades e solicitar ao Flex que gere seu CSS e uma outra um pouco mais complexas porem mais independente do Flex que lhe da mais liberdade.

Vamos ensinar logo a mais “chata”.

Para criar uma folha basta clicar com o botão direito na pasta do projeto -> New -> CSS File

Uma nova tela ira abrir onde você define o nome da folha de estilo e a pasta que a mesma irá ficar, proponho sempre que você crie um pacote para manter todos os CSS, mesmo que seja apenas um CSS gosto de colocar em um pacote.

Você ira perceber que uma nova folha de estilo foi criada, agora basta inserir o estilo desejado, no meu caso irei fazer um estilo chamado demyStyleBtn” onde irei alterar meu chromeColor (Cor de base do botão) , color (Cor da fonte do botão), fontSize(tamanho da fonte do botão).

.myStyleBtn
{
	chromeColor: #494646;
	color: #FFC000;
	fontSize: 18;
}

MainStyle.CSS (Dowload do Arquivo)

Estilo Criado agora basta utilizá-lo para fazer isto primeiro você vai na classe principal e define a folha de estilo a ser carregada, utilizando o seguinte parâmetro:

// caminho do arquivo
<fx:Style source="CSS/MainStyle.css"/>

logo depois basta você utilizar na propriedade styleName do objeto o nome da pelo bloco de css.

// utilização no controle
<s:Button x="10" y="10" label="Com CSS" styleName="myStyleBtn"/>

StyleSheet

Até a próxima.