Clear Formatting and Styles

After completing this topic, you will be able to clear direct formatting and styles affecting text and other elements in a web page.

Steps:

1. After applying a style, you can manually apply additional formatting to change the formatting.

    

   Click in the Orientation heading.

   Step 1

2. You are going to use direct formatting to center and change the font and font size of the heading.

   Step 2

3. Center the heading using the toolbar button.

    

   Click the Center button.

   Step 3

4. Select Orientation text and apply a Georgia, serif font from the Font family list and a font size of 32 points.

    

   Double-click in the Orientation text.

   Step 4

5. Click the Font Family button.

   Step 5

6. Click the Georgia, serif list item.

   Step 6

7. Click the Font Size button.

   Step 7

8. Click the 32 list item.

   Step 8

9. Depending on how formatting is applied, you can use the tools in the Web Page Editor to remove these attributes.

    

   Use the Clear Formatting From Text tool to remove direct formatting.

    

   Use the Clear Style tool to remove formatting applied by a style. Clearing the style attributes from an element does not remove direct formatting.

    

   Tip: When clearing a style, it is better to click in the text to remove the style attributes.

   Step 9

10. Clear the style on the Orientation heading.

     

    Click in the Orientation heading.

    Step 10

11. Click the Clear Style button.

    Step 11

12. Notice, as shown in the Style Inspector,  that the alignment, font and font size formatting remain.

     

    Only the blue font color applied through the style was removed.

    Step 12

13. Re-apply the Blue Verdana Heading 2 style to the Orientation heading.

     

    Click the Styles list.

    Step 13

14. Click the Blue Verdana Heading 2 - Heading 2 list item.

    Step 14

15. Notice that the style does not override the direct formatting. Direct formatting takes precedence over styles. Your font, font size, and alignment settings still control the text; however, since you did not directly set a text color, the Orientation heading uses the text color from the style.

    Step 15

16. Remove the direct formatting from the Orientation heading.

     

    Double-click the Orientation text to select the entire word.

    Step 16

17. Click the Clear Formatting From Text button.

    Step 17

18. The Clear Formatting from Text tool removes all attributes that were manually applied, but preserves attributes applied by the style.

     

    Clear Formatting From Text requires that you select the entire text, while you usually only have to click in the text to use Clear Style.

    Step 18

19. Use the Clear Style button to remove the formatting from the word shorter in the Portrait paragraph.

     

    Click in the word shorter.

    Step 19

20. Click the Clear Style button.

    Step 20

21. Note: Text styles can be removed from a text selection with either the Clear Style tool or the Clear Formatting from Text tool because they are applied as spans.

    Step 21

After completing this topic, you are able to clear direct formatting and styles affecting text and other elements in a web page.

Table of Contents  Start Topic