2022.1

Tip
Content added by a script isn't visible in Design mode, but is visible and can be
inspected in Preview mode.
The Styles pane shows which CSS style rules apply to the currently selected element.
A link next to a style rule will open the file where that particular style is defined. This can be
either a CSS file or the source file of a section if local formatting was used (see "Styling and
formatting" on page785).
A crossed-out style rule signals that it was overruled by another style rule. This happens when:
l A more specific, and therefore more important rule, is encountered for the same element.
See "Using a more specific CSS rule" below to learn more about the specificity of style
rules.
l A rule with the same importance is read after the first rule. Not only is the order of the rules
in a CSS file important, but also the order in which the style sheets are read. The style
sheets that are included with a section are read in the specified order; see "Applying a
style sheet to a section" on page502.
Using a more specific CSS rule
By default, many CSS properties of an HTML element also apply to the elements inside that
element. For example, a CSS rule that specifies a certain font-type for a box also applies to
paragraphs in that box. In this example the box is the 'parent' element and the paragraphs are
the 'child' elements that inherit the font-type property of the box.
Note
Although the background color property seems to be inherited, it isn't. Most elements are
transparent; therefore the background color of the parent element shines through.
To replace inherited style properties, you need to add a more specific CSS rule for that (type of)
element. In case of a conflict between a general rule and a more specific rule, the more specific
rule will be applied.
The following diagram shows the order of specificity.
Page 796