Understanding how inheritance works in CSS
- Just like we can inherit eye color, hair color and many other traits from our parents, xhtml elements can inherit styles from their parents.
- Child elements inherit style from their parents
- A child element is contained in the parent element
An example of inheritance
- The Head First Lounge
- Look at the code
Seeing Selectors Visually
- Picture on the board
- What are some child elements?
Study the Code
- Notice the <p> text is displayed as a default font family, in this case a serif font
- Add a sans serif font family rule to <p> and notice what happens to the <a> and <em> elements. (Hint: Inheritance)
Visual demonstration of inheritance
- Moving up the family tree
- Remove the font family rule from all elements, and add a <body> element in the external style sheet with the font family (Hint: More Inheritance)
Overriding the inheritance
- What if we do not want the same font family for every element in the body?
- Write a new rule for the <em> element to have a serif font family (Times, Georigia, serif;)
Question: How do I know which CSS properties are inherited and which are not?
In general, all styles that affect the way text looks are inherited
- color
- Font-family
- Font-size
- Font-weight
- Font-style
Experiment to discover which CSS properties are inherited and which are not.
Use resources:books, the internet