About Css Styles In Flex - MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual

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
the CSS file. You reference a CSS file into an MXML file with the
tag, as follows:
<mx:Style>
<mx:Style source="../siteStyles.css"/>
Embedded styles
styles are defined with the
<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
<mx:Canvas>
<mx:Button styleName="myclass">
</mx:Canvas>
A tag selector applies to all components of a particular type. For example, the
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
are defined in a separate file and can be used in any MXML file that references
are defined in an MXML file and can only be used in that file. Embedded
<mx:Style>
tag, as follows:
property, as in the following example:
styleName
Applying CSS styles to Flex components
property of the
source
<mx:Style>
tag
103