With Flex, MXML is
used to create the layout. The CSS is mostly used to modify
the look, such as color, font, and kerning, instead of affecting
the overall layout of the page.
Figure 2-9. The CSS panel
The best way to learn how these style attributes affect your components is to play
with them for a bit. See how different you can make your buttons!
Figure 2-8. Button label style controls
30
CHAPTER 2
Let??™s have a look at a small piece of the CSS produced in the Style Explorer to help you grasp the syntax.
Figure 2-10 shows the CSS for a button with just two properties set.
The CSS is made up of the selectors??”in this case, Button and a
declaration block. A declaration block consists of the property
and value that you want the component to be set to, enclosed
within curly braces. A semicolon is used to separate multiple
properties. Most of the possible properties for each component
are seen within the Style Explorer, but not all. A complete set of
the properties that can be changed with CSS for each component
is available in the help files that come with Flex Builder (see
Figure 2-11).
Figure 2-11. Flex help files showing available styles
It is this final section of the Style Explorer that makes it more than just a good learning tool??”it is a
great development tool as well. All of the changes that we have made through the style controls are
converted into CSS code, which is displayed in this area and can be copied into Flex Builder to style
the buttons in our project (we'll do this later.
Pages:
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50