CSS3 Inheritance

CSS inheritance is automatically defined by the style property used. In other words, when you look up thestyle property background-color, you’ll see a section titled “Inheritance”. If you’re like most Web designers, you’ve ignored that section. But it does serve a purpose.

What is CSS Inheritance?

Each element in an HTML document is part of a tree, and every element except the initial <html> element has a parent element that encloses it. Whatever styles are applied to that parent element can be applied to the elements enclosed in it if the properties are inherited.

For example, this HTML has an H1 tag enclosing an EM tag:

<h1>This is a <em>Big</em> Headline</h1>

The EM element is a child of the H1 element, and any styles on the H1 that are inherited will be passed on to the EM text as well. For example:

h1 { font-size: 120%; }

Since the font-size property is inherited, the “Big” text will be 120% in size as well as the rest of the H1.

How to Use CSS Inheritance

The easiest way to use it is to become familiar with theCSS properties that are and are not inherited. If the property is inherited, then you know that the value will remain the same for every child element in the document.

The best way to use this is to set your basic styles on a very high level element, like BODY. If you set your font-family on the body property, then, because of inheritance, the entire document will keep that same font-family. For example:

body {font-family: Arial, sans-serif; }

Use the Inherit Style Value

Every CSS property includes the value “inherit”. This tells the Web browser, that even if the property would not normally be inherited, it should have the same value as the parent. If you set a style such as a margin that is not inherited, you can use the inherit value on subsequent properties to give them the same margin as the parent. For example:

body { margin: 1em; }
p { margin: inherit; }

Inheritance Uses Computed Values

This is important for inherited values like font sizes that use lengths. A computed value is a value that is relative to some other value on the Web page.

If you set a font-size of 1em on your BODY element, your entire page will not be all only 1em in size. This is because elements like headings (H1-H6) and other elements (some browsers compute table properties differently) have a relative size in the Web browser. In the absence of other font size information, the Web browser will always make an H1 headline the largest text on the page, followed by H2 and so on. When you set your BODY element to a specific font size, then that is used as the “average” font size, and the headline elements are computed from that.

A Note About Inheritance and Background Properties

There are a number of styles that are listed has not inherited in CSS 2 on the W3C, but the Web browsers still inherit the values. For example, if you wrote the following HTML and CSS:

<style type=”text/css”>
h1 {background-color: yellow; }
</style>

<h1>This is a <em>Big</em> headline</h1>

The word “Big” would still have a yellow background, even though the background-color property is not suppoesd to be inherited. This is because the initial value of a background property is “transparent”. So you’re not seeing the background color on the <em> but rather that color is shining through from the <h1> parent.

You may also like...