Figure 2-24. Place customStyle1.css
in the assets folder.
38
CHAPTER 2
4. Since the styles that you created have now been copied into the clipboard, you can simply
paste (Ctrl+V/Cmd+V) them into the CSS file you created (Figure 2-25)??”do so now.
Figure 2-25. Paste the styles pasted into the CSS file.
Now we just have to tell our Flex application to make use of this file. We do this by jumping back into
our atomReader.mxml, selecting the source view, and entering an
element to reference
our CSS file.
5. Enter the line just below the opening
tag, as shown in Figure 2-26.
Figure 2-26. This tag connects our Flex application to the CSS file.
6. In order to see the changes to your design, save your file and then run the project again.
39
STYLING
The result should be an Atom Reader that looks dramatically different from the original default settings.
Your creation will likely look somewhat Frankensteinian at this point as we were focused more
on seeing dramatic changes and seeing all of the options for manipulating. Changing all the options on
a component is a good way to learn, but not the best way to create a subtle interface. Trying different
combinations will make you more familiar with the effects that the CSS has on your design. More subtle
use of the styling tends to have a better effect.
A more subtle design
Let??™s try a new design that uses more subtle changes.
1. To start fresh, first open the Style Explorer in a new browser window.
Pages:
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55