…also known as the Parent-Child Relationship Paul Johnson CIT230 November 7, 2014 Inheritance in CSS

Understanding the Concept A mother and father have blonde hair and blue eyes. When they have a child, he will likely also have blonde hair and blue eyes. …until that child decides to do his own thing and dye his hair purple.

The Concept Adapted In HTML, we have a similar structure. One element can be placed inside of another. When that occurs, the element placed inside the other becomes the child. The element containing the child is then, obviously, the parent element.  P ARENT  C HILD OF A RTICLE  C HILD OF A RTICLE & P ARENT OF S PAN  C HILD OF P In HTML, as in life, parents can have multiple children. And we know that, when a child grows to adulthood, it can become a parent and have children of its own. Likewise, in HTML, a child element can also be a parent element.

Styles Inherited Let’s say that we style the color of the text for the article element to be navy. The child elements of article will inherit that text color of navy. However, if you have styled the text color for the span element to be purple, that color will override the inherited navy color.  P ARENT  C HILD OF A RTICLE  C HILD OF A RTICLE & P ARENT OF S PAN  C HILD OF P

Application This gets a little more complicated as you work with semantic elements that are placed one inside another, inside another, inside another. When you catch yourself mumbling, “I changed just one little thing in my stylesheet, and now everything has changed!,” a recollection of this ‘parent-child’ principle will likely help you.

What if it doesn’t inherit? Some properties are not inherited with some elements. Other times you may wish to inherit a styling in a different circumstance (such as a span within a specific element). If you want a child to inherit a feature, you can use the inherit keyword in your style.

Example from W3Schools We want to set the text-color for elements to blue, except those inside elements with class="extra" (we want them to inherit the color from the parent element).span { color: blue; }.extra span { color: inherit; }

Review Any HTML element that is contained within another element, is a child element. Any HTML element that contains another element is a parent element. Child elements inherit styles from their parent …unless that child element it is styled differently. You can force inheritance when desired.

Sources