Professional Adobe® Flex® 3

Chapter 22. Styles

"Style" is a generic term. It can be defined as a kind of object, such as a kind of shirt or a kind of application, or it can be defined as how something appears, such as the application of typeface and color. This chapter explores style as it pertains to the Flex framework, in both of these senses. You'll learn how a Flex application's appearance can be styled, how you can reuse styles, and how you can use styles to customize the appearance of your application.

What Are CSS Styles?

Cascading Style Sheets (CSS) styles are a set of rules that define how your application will appear. CSS originated as a language used to control how HTML markup is rendered in the browser. The Flex framework takes advantage of the existing language specification for CSS to define styles as they pertain to Flex components. In Flex, you have a lot of control as to what CSS can dictate. CSS styles control background colors, text colors, font sizes, and layout (among others). In Flex, you are not only limited to specifying colors and sizes, but Flex's CSS supports the ability to control layout, styles applied to child components, shadows, and skins. This chapter focuses on styles and layout. You can expect more on skinning in Chapter 23, "Skinning and Themes."

Inline Styling Versus CSS

Styles on Flex components can be applied in one of two ways. They can either be applied directly on a component instance, or they can be defined in a style declaration that is later applied to a component instance. ...