Styles are applied from the top down where the lowest setting takes precedence over everything above it. Initially, the browser defaults control the appearance of the content in a web page. These defaults are overwritten by the styles you create, and finally direct web page formatting overwrites everything else (as long as the browser understands that markup).
Until you make a change, most new styles start by inheriting attributes from the browser defaults and the document body style, which is created with every new style sheet. For example, you set the document body style to use a Verdana 12 point font and then add a bulleted list style; the new style inherits the Verdana 12 point font.
Some styles inherit specific attributes only, such as the font, while the other attributes may be determined by another style or the browser defaults. For example, heading styles inherit the font from the document body style, but the font size of the style adjusts for the heading level, as determined by the browser defaults.
Changing the document body style also changes other styles that are directly dependent upon it. If you change an attribute for a style that inherits its setting from the document body style, you break the inheritance for that attribute. Therefore, if you set a specific font for a heading style, that font is preserved even when you change the document body font.
Default styles for an element also pass their attributes to non-default styles of the same element. If your default paragraph style uses 6 points of spacing above and below the paragraph, new paragraph styles inherit that setting.
Note: Lists have special inheritance rules for their bullets and numbering styles. See Format List Styles for more information about inheritance for List styles.
Style inheritance also affects compound styles where a main element controls the formatting for other elements within the style. While bulleted and numbered lists inherit many of their settings from the document body style, lower levels inherit their settings from the level directly above. So if you change the formatting attributes for Level 1, the remaining levels inherit those attributes; however, you can break the inheritance by changing the formatting for an individual level.
Attributes that are not inherited from another style are usually inherited from the browser defaults. Attribute settings inherited from the browser may be based on a percentage of the attribute settings for the document body style rather than absolute values, as is the case with heading level styles.
Note that the Style Editor controls (icons and dialog boxes) for the inherited attributes of a dependent style do not appear as selected, and may even appear blank. For instance, when you select the document body style, you can view the assigned font in the Font Family field. However, when you select a paragraph style whose font you have not changed, the Font Family field is blank because that attribute is inherited from the document body. If you break the inheritance by manually changing an inherited attribute, that attribute setting appears for the style.
Tip: Use the Style Inspector to view the attributes directly applied to a style and those inherited from other styles and the browser. See Work with the Style Inspector in this chapter for more information.
Restore Inheritance
You can restore inheritance to a style whose attributes you have manually changed. The method to remove an attribute to restore inheritance depends on the control that applied the attribute.
Note: Other factors may intercede in this inheritance process. For example, some servers may have a front-end application that reads your published HTML and applies its own style sheet first. If you also use a Developer style sheet and use direct formatting in your web pages, then the order would be: first, your browser has defaults for how to display web page, then anything between the browser and the web server may inject contents to override that, then the site may do so, then the front-end application, then the Developer style sheet, then the local web page markup overrides anything else, and lastly, the user can also set their browser to completely ignore all these things and instead use their own styles.