Inheritance CSS

The Document Tree html head meta title body h1 p br b i Document trees are made from HTML elements. The document tree is just like a family tree.

Nesting Tags HTML tags don’t have to always contain just text – can contain other tags child A tag that contains other tags is called a parent. The tags contained in a parent tag are called children. parent

Descendent to b (and also to p and body and html) The Document Tree Ancestor to h1, p, br, b, and i html head meta title body h1 p br b i b and br are siblings An ancestor refers to any element that is connected but further up the tree. A descendent refers to any element that is connected but lower down the tree. A parent is an element that is connected & directly above an element in the document tree. A child is an element that is connected & directly below an element in the document tree. A sibling is an element that shares the same parent as another element. Child of body Descendent to b (and also to p and body and html) Parent to i

What is inheritance? Specific CSS properties are passed down to descendent elements. <em> element sits inside the <p> element The <em> element sits inside the <p> element. It is the child (and also the descendent) of the <p> element. In a browser, the <p> and <em> elements will both be colored red, even though the <em> element has not been specified in the style sheet. The <em> element has inherited the color property from the <p> element.

Why is inheritance helpful? Makes it easier for us! Otherwise, we would need to specify properties for all descendent elements.

Not All Properties are Inherited We haven’t messed with borders yet, but they create..well, a border… Imagine if the border property was inherited…YUCK! If all properties were inherited, authors would have to turn off unwanted CSS properties for descendent elements. This would be a pain. For example – if the border property was inherited, and we applied a border to the <p> element, both elements would have a separate border, which would be gross!

Luckily Borders are Not Inherited

Generally… Only properties that make our job easier are inherited I’ve highlighted the ones we have seen already!

The Special Case of Font Size Font-size is inherited in a different way from other properties Why? If it were not… If font-size were directly inherited, and the font-size value of 80% were to be inherited, the <em> would be sized to 80% of the <p> element…which is not what we want most likely. Thankfully this is not the case!!

How does it work? Descendent elements get calculated value – doesn’t keep scaling Keeps consistent size based on ancestors’ values for font-size

Use Inheritance for Efficiency Example: you can set the color, font-size and font-family on the body element. These properties will be inherited by all descendent elements. You can then override the properties as needed, specifying new values.