Work with Style Inheritance

After completing this topic, you will be able to work with style inheritance.

Steps:

1. The Document style contains the formatting for the document body element.

    

   The Style Inspector shows that the Document style currently specifies the attributes for the text color, font, and font size only.

   Step 1

2. We have selected the paragraph style, which is named Default Paragraph.

    

   The Style Inspector shows that the text color, font, and font size attributes are inherited from the document body style.

    

   Notice that the paragraph style has inherited 10 points of before and after spacing defaults from the browser. The size of the before and after spacing based on the font size.

   Step 2

3. Select the Document style.

    

   Click the Document header.

   Step 3

4. Change the document body font size to 18 points.

    

   Click the Font Size button.

   Step 4

5. Click the 18 list item.

   Step 5

6. Notice that the font has also changed for the Default Paragraph style.

    

   Since the paragraph style does not have a separate font size setting, it continues to inherit the font size from the document body style.

    

   Notice the change to the before and after spacing inherited from the browser defaults. The spacing adjusts to the font size.

   Step 6

7. Add a Text style to the style sheet.

    

   Click the Add Style button.

   Step 7

8. Click the Text list item.

   Step 8

9. We have named the style Text 1.

    

   Text styles also inherit their initial attributes from the document body style.

   Step 9

10. Undo the last two changes.

     

    Click the Undo Add Style - Link button.

    Step 10

11. Click the Undo Font Size button.

    Step 11

12. You can break inheritance by changing the inherited attribute. Change the before and after spacing attributes that are inherted from the browser defaults.

     

    Click the Spacing button.

    Step 12

13. Although the Style Inspector shows that the Default Paragraph style applies 10 points of before and after spacing for paragraphs, those values do not appear in the Spacing dialog box because those attributes are inherited from the browser defaults.

     

    You need to use the Style Inspector to identify all of the attributes affecting a style.

     

    Break the 10 point inheritance by specifying 6 points of before and after spacing.

    Step 13

14. We have specified 6 points of Before and After spacing. Save the changes.

     

    Click the OK button.

    Step 14

15. The Style Inspector shows 6 points of before and after spacing directly applied to the paragraph style.

    Step 15

16. Add another paragraph style.

     

    Click the Add Style button.

    Step 16

17. Click the Paragraph list item.

    Step 17

18. We have named the new paragraph style P2.

     

    Although you can change it, the first style of an element is created as the default style for the element. New styles of the same element are created as non-default styles.

     

    Non-default styles inherit the attributes that are directly set for the default style for that element. In this case, the non-default P2 style inherits the before and after spacing from the Default Paragraph style.

    Step 18

19. Change the attributes for the P2 style.

     

    Click the Italic button.

    Step 19

20. Click the Bold button.

    Step 20

21. We have also applied a Lucida, Sans Unicode font to the P2 style

     

    The Style Inspector shows the font, italic and bold attributes that have been directly applied to the P2 style.

     

    It also shows the attributes inherited from the default document body style and the default paragraph style.

    Step 21

22. You can remove direct formatting from a style. Remove the bolding from the P2 style

     

    Click the Bold button.

    Step 22

23. Select the Default Paragraph style.

     

    Click the Default Paragraph header.

    Step 23

24. Restore the before and after spacing inheritance by removing the spacing you applied to the Default Paragraph style.

     

    Click the Spacing button.

    Step 24

25. Delete the 6 points of Before spacing.

     

    Press [Delete].

    Step 25

26. Select the After spacing.

     

    Double-click in the After field.

    Step 26

27. Delete the 6 points of After spacing.

     

    Press [Delete].

    Step 27

28. Save the changes.

     

    Click the OK button.

    Step 28

29. Removing the direct formatting restores the inheritance from the browser.

    Step 29

After completing this topic, you are able to work with style inheritance.

Table of Contents  Start Topic