This time we are going to focus on the Application and Panel components. Selecting colors as you go
through the CSS tends to lead to mismatched colors as you do not see all the colors at once. For this
reason it is important to set a color scheme at the beginning. Figure 2-27 shows the color scheme that
we will be using.
Figure 2-27. Color scheme
2. Give the application background a soft color to avoid distracting from the main content; d8c4a8
works well (Figure 2-28).
Figure 2-28. Setting the background color
40
CHAPTER 2
3. In the panel, add some complementary colors to the border, leaving the content area white to
get crisp text. You can see the settings we used in Figure 2-29.
Figure 2-29. Panel styling
For the title, the main concern is to keep the text readable (Figure 2-30).
Figure 2-30. Title styling
41
STYLING
4. Choose the Title Styles tab in the Style Controls and modify the setting.
5. Now that you??™ve specified all the settings, you can export all the CSS to the clipboard as you
did earlier (Figure 2-31).
Figure 2-31. Click the Export All
CSS button.
6. With the CSS now stored in the clipboard, you can now copy it into your CSS file??”copy it into
customStyle1.css, replacing what was there before.
7. Run your project again, and it should look like Figure 2-32. The project is now properly styled
(well, according to us!).
42
CHAPTER 2
Figure 2-32. Our styled Atom Reader
Summary
In this chapter, you learned how to use CSS to change the look of your applications.
Pages:
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56