When you’re working with an application component and styles, the application component can define its own style values for components within it. The easiest way to specify such styles is to define Cascading Style Sheets (CSS) within the application component as you would within an application (however, you will still have the limitation of not being able to specify CSS type selectors other than in ActionScript). When working with styles within a component, keep in mind why application components exist. They don’t exist to be as fully featured and flexible as distributed components. They exist to allow you to build an application more efficiently. As such, you may find that defining styles within an application component is acceptable.
With application components, you can also define your own custom styles, as discussed in Chapter 19.
Also, as we saw in Chapter 8, styles in Flex support
inheritance, which is also supported by application components. When
defining a global style or CSS custom class, these styles are applied to
all display items in Flex. This allows you the benefit of providing one
master CSS file for an application. In the CSS file, you can define your
custom style, and for any component in your application you can apply the
style by setting the
In this example, we first set the
styleName property of the
<mx:Label id="contactName" styleName="heading" x="10" y="10" text="John Doe"/>
styleName value is set, ...