Text style inheritance overview

Check out examples of how elements can pass text style information down to their children.

This video features an old UI. Updated version coming soon!

As we know from both HTML element hierarchy and Louisiana Civil Code, elements can pass Text Style information down through to their children. We can set Text Styles on parent elements which pass styling down, and we can override these styles on their child elements.

We're going to show three examples to demo this. That's it. We'll start with the first one.

Let's look at this ultra-simple layout. We have our page body, then inside that we have our Section, then a container inside the Section. Let's drag in a paragraph to join our heading. Now we've applied no classes — no styling of any type to any of these elements.

By default, if we check our paragraph (press our orange indicator), we can see it's getting the font from the body. Let's select the body. And with the body selected, we'll change the font.

Now because this updates in real time, this part has already been spoiled. We know that our heading and our paragraph are inheriting this new font change from the body. We can override this, though. Make a change, now have a blue indicator which, of course, shows us that we've made a style change here. Or we can remove that. Again, if we click the indicator, it's inheriting from the body.

And keep in mind: while the body is the top level element, we'll have to apply that body class (which was automatically created when we changed the font) — we'll have to apply that to the body on other pages, too. A great alternative — and we'll remove this class right now — is to go in and select our Body (All Pages) tag. Changes here will set those defaults on all pages in the project.

That's example 1.

Example 2 is a Section.

And even though it's not a text element, we can apply font styling here, too. First, let's see where it’s coming from. Of course, it's coming from our body tag for all pages. With our Section selected, let's override this font, and while we're at it, let's change the font color, too. Notice how the heading and paragraph inside — both child elements of the Section — notice how these are affected by the changes. That's because this override broke the chain of inheritance.

Before, the Section's child elements (the heading and the paragraph) didn't have any indication from their direct parents (like the container or the Section) regarding font. The Section and the container weren't specifying anything, so the heading and paragraph looked all the way up the hierarchy to the body for that styling info. So it didn't matter.

But since we've added styling to the Section, that's overriding that styling. If we take a closer look at the inheritance, we can see the value is now coming from the Section.

Just like we overrode the body earlier, we can do the same thing here. Any child element can override text styling. We can see our blue indicator which means exactly that. Let's remove it, and again, we're inheriting from our Section.

That's example 2.

Example 3 is a Link Block. Same idea here.

Here's some text sitting inside a Link Block. We could style the text directly, or we could simply select the Link Block and change the styling here. Once we do that, we can go in and select our text.

Where is this style value coming from? Of course, it's coming from our Link Block.

We can override at any time, or we can remove that and check to see that, yet again, we're inheriting that style value from the Link Block.

So, regardless of the context or the element type, text styling passes down through the hierarchy unless it's been overridden.

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.

Try Webflow — it's free