MACROMEDIA FLEX BUILDER-USING FLEX BUILDER, Use Manual

Page: 103 / 158

Applying CSS styles to Flex components 103
Related topics
•
“Editing Flex component properties” on page 101
•
“Applying effects to Flex components” on page 109
•
“Creating MXML component files” on page 121
About CSS styles in Flex
You can use CSS styles to modify your Flex user interface more efficiently. As your design evolves,
you can add, delete, or change styles, giving you greater freedom to achieve your design goals.
CSS styles in Flex can be defined at the site level with external styles, at the document level with
embedded styles, or at the component level with inline styles.
External styles
are defined in a separate file and can be used in any MXML file that references
the CSS file. You reference a CSS file into an MXML file with the
source
property of the
<mx:Style>
tag, as follows:
<mx:Style source="../siteStyles.css"/>
Embedded styles are defined in an MXML file and can only be used in that file. Embedded
styles are defined with the
<mx:Style>
tag, as follows:
<mx:Style>
.myclass { background-color: xFF0000 }
TextInput { font-family: Helvetica; font-size: 12pt }
</mx:Style>
The previous example shows the two types of selectors supported by Flex: class selectors and tag
selectors. A class selector defines a new named style, such as myclass. Once defined, you can apply
the myclass style to any component using the
styleName
property, as in the following example:
<mx:Canvas>
<mx:Button styleName="myclass">
</mx:Canvas>
A tag selector applies to all components of a particular type. For example, the
<mx:Style>
tag
above defines a tag selector that applies a background color to all TextInput components in the
current file.
Inline styles are defined in an MXML tag and can only be used in that tag. Inline styles are
defined as follows:
<mx:Button color="red"...>
Flex uses slightly different names for multi-word CSS property names such as font-family or font-
size. Hyphens are removed, the letter following each hyphen is capitalized, and equal signs instead
of colons are used for property values. For example, font-family and font-size become fontFamily
and fontSize in Flex, as follows:
<mx:TextInput fontFamily="Helvetica" fontSize="12"...>
Related topics
•
“Using Styles” in Developing Flex Applications Help