Tuto WEBDEV 25

Part 7: Specific Web features 285 4. Validate the window for style selection. The color of control caption changes: the style is applied. ▶ Save the page (Ctrl + S) and run the page test ( among the quick access buttons). 1.  The page is displayed in the browser. 2. Enter in input in the new edit control: the input area is colored in yellow. 3. Close the browser. Overloading a CSS style for a control ▶ We are now going modify the style of the input area found in the control: 1. Display the description window of created control. 2.  In the "Style" tab, choose the "Input area (CSS)" element. 3. Click the link "More overrides" to override the CSS of this element. 4. Select the "Edit" status. 5.  In the "Background" tab, change the background color. Choose a purple color, for example. 6. Validate. In the WEBDEV styles pane, the link (top right) indicates "1 override". 7. By clicking it, you can see that the background color of the editable inside area was overridden. 8. Validate the control description window. ▶ Save the page (Ctrl + S) and run the page test ( among the quick access buttons). 1.  The page is displayed in the browser. 2. Move the cursor from a control to another one: the background color is yellow for all controls except for the control that was just created. 3. Close the browser. Modifying a CSS style for all controls ▶ We are now going to modify the CSS style of input area in order to change the text color. This modification will be performed for all edit controls of the page. 1. Display the description window of created control (Alt + Enter). 2.  In the "Style" tab, choose the "Input area (CSS)" element. 3. Click the [...] button on the right of the name of CSS style. The window for editing the CSS style is displayed. 4. Select the "Normal" status. 5.  In the "Text" tab, change the color. Choose a green color for example. 6. Validate then validate the description window of control.