How to work with Inheritance

To work with Inheritance

If you assign a style to an HTML tag, the children will inherit those style specifications. Suppose there are an H1 tag with a style property blue and an in-line emphasized element:

The headline is blue.

If no color has been assigned to the in-line EM element, the emphasized "is" will inherit the color of the parent element; that is, it will also display in blue. Other style properties are likewise inherited—for example, font-family and font-size.

As in hardcopy publishing, the value of a style property is often given as a percentage that refers to another property.

H1 { font-size: 24pt }

H1 { line-height: 120% }

If a property can be specified as a percentage, the browser needs to know what property that the percentage refers to. Children of H1 will inherit the computed value of line-height and be set to 28.8 pt, but they will not inherit the percentage.