Text style inheritance overview

Elements can pass text style information down to their children. You can set text styles on parent elements, which will cascade down, and you can override these styles on their children elements.

It’s common to use this technique to set global font styles on the Body tag, to align text and other elements inside of sections, and to override default link block styles. Here are these three examples covered more in-depth to show how text style cascading works:

Example 1 — Inheriting styles from the Body

In this example, we have a simple layout:

None of these elements have class names or styles.

By default, these elements inherit their text styling from the Body. You can see this by clicking the orange indicator next to the text styles. Changing the font-family on the Body will consequently change the font-family for all it’s child elements.  

You can override this inherited text styling by selecting one of the text elements and changing the font-family. You will then see a blue indicator showing that a style change has been made on that element.

You can remove this style by clicking the blue indicator and choosing “Remove this style” (or hold ALT and click). Removing the style will set the font-family back to inheriting from the body.

Keep in mind while the body is the top level element, changes made to it will only affect that specific page. To apply styles to the body of all pages, first select the body element and remove the class name. Then you can select its Tag and make text style changes.

Example 2 — Inheriting styles from a Section

Even though a section is not a text element, you can apply font styling here. By default, a section will inherit its text styling from the body element. You can override this by selecting the section and making text style changes.

Prior to making these changes, the Heading and Paragraph elements were looking all the way up to the top of the hierarchy to get their text styles from the body. Notice how, after the changes are made, both the Heading and the Paragraph—children of the section element—now inherit these styles. This is because changing the text styles on the section element broke the chain of inheritance from the body.

It’s common to change the text alignment to Center on a section. This will align all text and inline-block elements, like images and buttons, inside of a section to be centered.

Example 3 — Link Block

In this example, there’s some text nested inside a Link Block. You can style this text directly, or you could select the Link Block and make changes here. These style changes will, just like before, break the chain of inheritance and cause the text to inherit from the Link Block. To test this, you can select the text element and click the orange indicator to see that the text styles changes on the Link Block are also changed here.

You can also override the Link Block’s default blue text styles by selecting the text element and making changes. The same logic applies here—styling the text element directly will override any inherited text style.