Chapter 4 Saving time with Style Inheritance
inheritance when you inherits traits/properties from a parent or ancestor.
For example, all tags inside the body tag, will inherit all body tag properties. Nota bene you can set html tag rules for the entire web page.
For CSS last rule in wins, but more specific will win over last rule.
For this p block it inherits blue font color from body, but the more specific rule for p tag over rides it back to black. Notice most of body is blue. In your web browsers inspect, CSS design panel you will see a line through color:blue for body.
Inheritance Streamline Design aspect:
notice font-family is set for the entire Web Page body and
p font-size:1.2em, automatically sets the size of strong inside p tag.
Inheritance Limitation
A div inside p doesn't inherit border, possible HTML error
- Block Elements, don't inherit borders, backgrounds, margins borders, note div block above doesn't have a green border.
- For table, you have to set border for table and td tags, I use attribute border="1" for table, but a CSS purist would use all CSS for formating.
- Background colors can be override by setting
for background-color we often use transparent or inherit
Tutorial Single level of Inheritance Page 90
- copy up and open 04/inheritance.html
- Add p {
color: rgb(92,122,142);
}
- Open and preview web page
Using Inheritance to Restyle an Entire Page
- using inheritance.html
- at end of <style> block add rule for class content..
- .content {
font-family: “Helvetica Neue”, Arial, Helvetica, sans-serif;
font-size: 18px;
color: rgb(194,91,116);
max-width: 900px;
margin: 0 auto;
}
- Set body tag to class="content"
- Save and Preview work - notice cascading effects - p tag color conflicts.
Inheritance Inaction - margins padding and borders are not inherited - page 94
- Expand <p> tag in inheritance.html
- Modify <p> tag rule:
- p {
color: rgb(50,122,167);
padding-left: 20px;
border-left: solid 25px rgba(255,255,255,.5 );
}
- Save and preview file.