Exercise 5.3: Using advanced CSS selectors

In this exercise, you will use advanced CSS selectors to style the sample application as shown in Figure 1.

In this exercise, you will learn how to:

• Use CSS descendant selectors
• Use CSS pseudo selectors
• Use the CSS id selector

In this section you will use a descendant selector to change the Button controls.

1. Download the ex5_03_starter.zip file if you haven't already and extract the file ex5_03_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_03_starter.fxp file.
4. Open the ex5_03_starter.css file.
5. Below the selector for the MonthlyEvents component, create a descendant selector for Button control instances that are located within the Panel containers.

6. Within the selector, assign the color property to #000000 (black) and the chromeColor property value to #64BC48 (green).

7. Save the file.
8. Run the application.

   You should see the buttons located within the panels have a green background and black text, whereas the Logout button is unchanged (see Figure 2). The descendant selector only affected Button controls that are in Panel containers.

   The Scroller control is also a descendant of the Panel container and uses Spark Button controls in its skin for the track, thumb, up, and down buttons. As a result, any color property applied to a Spark Button control within a Panel container will also be applied to the Scroller control (see Figure 2).

9. Return to the ex5_03_starter.css file in Flash Builder.
10. Below the descendant selector for Button controls within Panel containers, create a descendant selector for the Button controls used within Scroller controls within Panel containers.

11. Within the selector, assign the chromeColor property value to #555555 (dark gray).

12. Save the file and run the application.

The scrollbars within the panels are now dark gray (see Figure 3).

In this section you will use pseudo selectors to change the color of Button controls based on their current state.

1. Return to the ex5_03_starter.css file in Flash Builder.
2. Change the Panel container descendant selector so that it applies to the down state of the Button control.

3. Save the file and run the application.
4. Click each button within the application and take note of the down state.

   You should see that the buttons within the panels have a green down state whereas the Logout button does not (see Figure 4).

5. Return to the ex5_03_starter.css file in Flash Builder.
6. Below the Panel container descendant selector, add a selector for the up state of the Button control and assign the color property value to #FFFFFF (white) and the chromeColor property value to #555555 (dark gray).

7. Below the selector for the up state, add a descendant selector for the over state for the Button controls within the Panel containers and assign the color property a value of #000000 (black) and the chromeColor property value to #0D86B8 (blue).

8. Save the file and run the application.

You should see all the buttons in the application are a dark gray color and turn blue when the mouse is over them (see Figure 5).

Note that the scroll bar is also affected by these changes.

9. Return to the ex5_03_starter.css file in Flash Builder.
10. Locate the descendant selector for the Button control used within the Scroller control within the Panel container.
11. Change the descendant selector so that it applies to the over state of the Button control.

12. Under this instance of the descendant selector, create another descendant selector for the Button controls in the Scroller control within the Panel container and apply it to the down state of the Button control.
13. Add the chromeColor property to the descendant selector and give it a value of #555555.

14. Save the file and run the application.

    You should see that when you mouse over or click on the scroll bar, the color is now gray (see Figure 6).

In this section, you will use a CSS id selector to change the color of the employee name within the EmployeeOfTheMonth component.

1. Return to Flash Builder.
2. From the Package Explorer view, locate the components folder and open the EmployeeOfTheMonth.mxml file.
3. Locate the Label control with the text property value assigned to ATHENA PARKER.
4. To the Label control, add the id property with a value of employeeName.

5. Save the file.
6. Open ex5_03_starter.css.
7. At the bottom of the file, use the id selector (#) and the Label control's id property value, employeeName.

8. Within the id selector, add the color property and assign a value of #FF0000.

9. Save the file and run the application.

   The employee name within the Employee of the Month panel is now red (see Figure 7).

In this exercise you used advanced CSS selectors to style the sample application.