Inheritance and cascading styles

Styles can be inherited from parent elements, or set on specific elements                                                                                                         

When you use Typecast you are designing in the browser. That means that with every change you make on your canvas, the HTML and CSS behind your work is updated. It also means that the rules of cascading style sheets and inheritance are adhered to exactly as they would be in a browser, because you are in the browser.

CSS specificity and inheritance

How an element looks is determined by the styles set on that element, known as CSS specificity, and the styles inherited from a parent element, CSS inheritance. Find out more in this breakdown of cascading and specific styles.

In Typecast, styles set specifically on the current element have a black background, while default and inherited styles have a gray background.

The styles applied of an element are a combination of specific and inherited styles

The body tag

Your entire project is contained within the HTML body tag, so it's a good idea to set some basic styles at this level. These will cascade down through your entire structure, until you override them with specific styles on child elements.

Set base styles on the body tag

The black background on the font/weight selection, text size and line height indicates that these values have been set on the current element, which is the body tag. This is shown in the blue breadcrumb bar that sits just above the font menu.

Styling child elements like div, h1 and p

Child elements can inherit styles and have properties set specifically on them. The rules of cascading styles apply here too, so styles set on a div will be inherited by paragraphs and headings contained in the div, unless overwritten with specific styles. Likewise, a paragraph with a custom class will inherit its style from the standard paragraph, unless overwritten with its own properties.

Inherited values have a grey background, specific styles have a black background

Here, the font / weight has been inherited, while the text size and line height have been set explicitly on the current element. The blue breadcrumb bar shows us that p.intro is the currently selected element.

Here's an example of how inheritance works, with a breakdown of inherited and specific styles.

How to trace an inherited style

You can use the parent selector or element breadcraumb to navigate your way back through the lineage of an element and find where a specific style has been set.

Use the breadcrumb to select to parent elements

If the element you are inspecting has a custom class applied, remember to check the generic version of that element too, as it may be inheriting some style properties from it. So, say you are inspecting a block of content marked up as "p.intro", check the "p" element styles by clicking into a paragraph, or open the CSS editor to see the raw style declarations.

How to override an inherited style

Simply select the element, then set a specific value for the property you want to change. Because you've now set a value for this property on this element, the background will change from black to grey.

How to delete a specific style

You can clear text inputs by clearing the value of the field, or toggle things like left/right/center alignment on and off. Or open the CSS editor and delete the style declarations there.

The property will now inherit it's value from a parent element o the current element and all child elements where the property has not been specifically set.

Have a question?
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found