One of the core concepts of designing on the web is inheritance. Essentially, this means that “child" elements on the page can inherit the styling of their “parents."

In TIME Sites, you’ll find that elements can inherit their styling in three important ways:

The characteristics that can be inherited include a lot of things that don’t always intuitively feel like “styling” -- width/height, margin, padding, absolute positioning, filters, and transforms, in addition to more obvious things like font styles, colors, backgrounds, and borders.

Inheritance is useful! It means that you don’t have to manually style every single element on your page. Instead, you can take advantage of inheritance (in particular via your global styles) to automatically control the appearance of many elements at once.
​

To learn what changes are responsive vs show up on all device modes, check out this article.

The elements on a web page have a hierarchical organization. For example, a grid element may contain an container element, which may contain a text element. (You can always view the hierarchy of your own page via the Page Structure Panel.)
​

Styling that is applied to an element further up the hierarchy (the grid or the container, in this example) will flow down the hierarchy and also be applied to child elements (the text box.)
​

The global styles function as the very highest level of your website’s hierarchy. Any styling that you define here will be automatically be inherited by all elements of that type. 

So if you apply styling to headline 1 text in the Global Styles Panel, for example, it will be inherited by all the <h1> text everywhere on your website.

To make your website responsive and mobile friendly, you’ll need to use Device Mode. As you make changes at different screen widths, those changes will flow downwards through the device hierarchy: styling made while in tablet mode will be inherited by phones, for example.

By selecting the elements on your page you are able to apply changes in styling such as color, font-weight, margin, padding, and more. Style changes made at the element level give you the flexibility to make adjustments at each device mode, with any changes you make only reflecting downwards.

You can refer to this article to see what kinds of styling changes are responsive.
​

There will be plenty of occasions where you don’t want a particular element to inherit its styling. In these cases, you can select the particular element (or piece of text) directly, and style it the way you want. This is called inline styling and it will override any inheritance.

Keep in mind that this means inline styling will override Global Styles. This is very useful because it gives you the flexibility to deviate from your global stylesheet if you need to -- but if you want the element to return to Global Styles, you’ll have to remove the inline styling first.

In TIME Sites, a styling parameter that is inherited is indicated with a light grey font. If the styling is being set inline, it’s indicated with a dark grey font.

Inline styling can be removed simply be selecting it in the panel and pressing delete / backspace.

If an input is completely empty, this means that no value has been set for this property (for example, the "text indent" in the screenshot above is empty.)

Note that an unset value is not the same thing as a value of "0"!

An unset value is like a blank slate: it can potentially inherit a value from a parent's styling. If the value has been set to "0" inline, it will not inherit any values.

The inheritance rules of the web means that sometimes, your attempts to style your fonts a certain way don't seem to work -- you try and make changes, but they don't appear.

If this is happening to you, it's most likely because the font's styling is being inherited from somewhere else.

So, you'll need to investigate to find out where:

1. Check and see if inline styling has been applied. Inline styles -- changes that you make to copy inside a text element by manually highlighting it -- will override everything else. Try selecting the text and looking at the Text Formatting Panel to see if styling is being applied inline. (If you aren't sure, try clicking the "Clear Format" button to see if anything changes.)

2. Check and see if Global Styles are being applied. If you're trying to make changes by selecting the overall text box, and nothing's happening, there may be Global Styles affecting the text within: Global Styles will always override element-level text styling. Open the Global Styles Panel and check the tabs for the font classes you're using. For example, if your text contains <p> paragraphs, check the "Paragraph" styling to see if any values are being set here. (Again, if you aren't sure, try clicking the "Clear Format" button to see if anything changes.)

3. Make sure you've got the right element selected! If the text box is inside of something else, like a container, make sure you're selecting the text box itself and not the parent. (Any styling on the child element will always override styling on its parent.) To make sure you're selecting the right thing, take a look at your Page Structure Panel.