CSS Cascade Vs Inheritance
Notes:
Cascade vs. Inheritance
Cascade:
deals with precedence of style rules or CSS properties
(i.e. the order in which properties are applied to an html element).
It solves conflict situations.
Let me ask you a question:
What happens when we define set of style rules for a specific tag in external, internal as well as inline styles?
The answer is: “rules get’s cascade”
When we define a set of style rules for a specific tag in external, internal as well as inline style, then browser creates a virtual declaration list by merging all style rules together by following rules of cascade, and then applies the merged virtual declaration list to specified tag.
The rules of the cascade include:
1. Later properties (nearest) override earlier (farthest) properties
2. More specific selectors (less generic) override less specific (more generic) selectors
Inheritance:
deals with how styles poured down from a parent element to its child elements.
Certain properties, like font-family gets inherited. If you set a font-family on the body element, then it will get inherited by all the elements within the body.
The same is true for color, but it is not true for background color, border-style,margin or height which will always default to transparent, none, auto and auto.
Interview Questions:
1. Which CSS style gets inherited to child HTML elements when applied to parent HTML element?
a. border-style
b. font-family
c. background-color
d. margin
Answer: b
