CSS CSS FUNDAMENTALS
Inheritance
IN A ROCKET
Learn front-end development at rocket speed
INHERITANCE
Some properties on a selector are inherited by all the children of that selector.
div { color: green; }
Hello world!
p
I've inherited the color of my parent.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
INHERITANCE
HTML CSS
<body> main { color: green; }
<main>
Here starts the main area of this site.
<article>
<p>We hope you enjoy this article.</p>
</article>
</main>
</body>
Browser
Web page title
[Link]
Here starts the main area of this site.
We hope you enjoy this article.
Inherited
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
INHERITANCE: PROPERTIES THAT INHERIT
border-collapse
font-family
list-style-image
visibility
border-spacing
font-size
list-style-position
white-space
caption-side
font-style
list-style-type
widows
color
font-variant
list-style word-break
cursor
font-weight
word-spacing
direction
font-size-adjust
orphans
empty-cells font-stretch
quotes
font
tab-size
letter-spacing
text-align
line-height text-align-last
text-decoration-color
text-indent
text-justify
text-shadow
text-transform
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
CONTROL INHERITANCE
INHERIT INITIAL UNSET
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
“The inherit keyword causes the element for which it is specified to take
the computed value of the property from its parent element.”
SOURCE: Inherit by MDN.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
INHERITANCE: INHERIT
HTML CSS
<body> h2 { color: blue; }
<h2>A normal header</h2>
<header> header { color: green; }
<h2>I should be blue but I'm inheriting
header h2 { color: inherit; }
green</h2>
</header>
</body>
Browser
Web page title
[Link]
A normal header
I should be blue but I'm inheriting green
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
CONTROL INHERITANCE
INHERIT INITIAL UNSET
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
“The initial keyword applies the initial value of a property to an element.
It is allowed on every CSS property.”
SOURCE: Initial by MDN.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
EXAMPLE: COLOR PROPERTY
SOURCE: Color by W3c.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
EXAMPLE: FONT-SIZE PROPERTY
SOURCE: Font-size by W3c.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
INHERITANCE: INITIAL
HTML CSS
<body> main { color: green; }
<main> p { color: initial; }
<h1>Here starts the main area<h1>
<article>
<p>We hope you enjoy this article.</p>
</article>
</main>
</body>
Browser
Web page title
[Link]
Here starts the main area of this site.
We hope you enjoy this article.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
INHERITANCE: INITIAL + ALL
HTML CSS
<body> main {
<main> color: green;
Here starts the main area of this site. font-size: 200%;
<article> }
<p>We hope you enjoy this article.</p>
</article> p { all: initial; }
</main>
</body>
Browser
Web page title
[Link]
Here starts the main area of this site.
We hope you enjoy this article.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
CONTROL INHERITANCE
INHERIT INITIAL UNSET
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
The unset keyword resets a property
1. to its inherited value if it inherits from its parent, and
2. to its initial value if not.
SOURCE: Unset by MDN.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
INHERITANCE: UNSET
HTML CSS
<body> p { color: blue; }
<p>All paragraphs are blue.</p>
header { color: red; }
<header>
<p>My parent is red but I'm a paragraph.</p>
</header> main { color: green; }
<main> main p { color: unset; }
<p>I should be blue but I'm resetting to my
parent's color.</p>
</main>
</body>
Browser
Web page title
[Link]
All paragraphs are blue.
My parent is red but I'm a paragraph.
I should be blue but I'm resetting to my parent's color.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
INHERITANCE: UNSET
HTML CSS
<body> p { color: blue; }
<p>All paragraphs are blue.</p>
header { color: red; }
<header>
<p>My parent is red but I'm a paragraph.</p>
</header> main { /* No color */ }
<main> main p { color: unset; }
<p>I don't inherit any color from my parent so I
just reset to initial.</p>
</main>
</body>
Browser
Web page title
[Link]
All paragraphs are blue.
My parent is red but I'm a paragraph.
I don't inherit any color from my parent so I just reset to initial.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
CONTROL INHERITANCE
INHERIT INITIAL UNSET
CSS FUNDAMENTALS: Build a strong foundation by solving real cases [Link]
YOU CAN CONTINUE THIS COURSE FOR FREE ON
inarocket .com
Learn front-end development at rocket speed
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES
by [Link]
inarocket .com
Learn front-end development at rocket speed
We respect your time
Step by step guides
Ready to use code
No more blah blah videos. Just straight to Clear and concise steps to build real use Real code you can just copy and paste into
the point slides with relevant information. solutions. No missed points. your real projects.
CSS CSS FUNDAMENTALS
Inheritance
IN A ROCKET
Learn front-end development at rocket speed
