CSSを使ってFlexコンポーネントの外観変更

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- CSSファイル -->
    <mx:Style source="css/MyFlexApp.css" />
    
    <mx:Button id="btnClick" label="クリック" />
    <mx:Button id="btnClear" label="クリア" styleName="someStype" />
</mx:Application>

/** Applicationタグ　スタイル **/
Application {
    paddingRight: 10;
    paddingLeft: 10;
    paddingTop: 10;
    paddingBottom: 0;    
}

/** Formタグ　スタイル **/
Form {
    verticalGap: 0;
    paddingTop: 0;
    paddingBottom: 0;
    paddingLeft: 0;
    paddingRight: 0;
}

FormItem {
    paddingTop: 2;
    paddingBottom: 1;
}
Button {
    fontWeight: bold;
}

/** CheckBoxタグ　スタイル **/
CheckBox {
    fontWeight: bold;
}


.glassPanel {
    backgroundSize: "100%";
    backgroundImage: Embed(source="/assets/myflash.swf");
    paddingTop: 7;
    paddingLeft: 10;
}

.DropDownStyles {
    dropShadowEnabled: true;
    cornerRadius: 0;
}

.someStype {
    backgroundImage: Embed(source="/assets/mypic.png");
}