14- Learn CSS Fundamentals / Inheritance

IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Inheritance

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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.

HTML CSS
Browser
INHERITANCE
<body>
<main>
Here starts the main area of this site.
<article>
<p>We hope you enjoy this article.</p>
</article>
</main>
</body>
main { color: green; }
Web page title
index.html

We hope you enjoy this article.
Inherited

INHERITANCE: PROPERTIES THAT INHERIT
border-collapse

border-spacing

caption-side

color

cursor

direction

empty-cells
font-family

font-size

font-style

font-variant

font-weight

font-size-adjust

font-stretch

font

letter-spacing

line-height
list-style-image

list-style-position

list-style-type

list-style
orphans

quotes

tab-size
text-align

text-align-last

text-decoration-color

text-indent

text-justify

text-shadow

text-transform
visibility

white-space

widows

word-break

word-spacing

CONTROL INHERITANCE
INITIAL UNSETINHERIT

“The inherit keyword causes the element for which it is speciﬁed to take
the computed value of the property from its parent element.”
SOURCE: Inherit by MDN.

HTML CSS
Browser
INHERITANCE: INHERIT
<body>
<h2>A normal header</h2>
<header>
<h2>I should be blue but I'm inheriting
green</h2>
</header>
</body>
h2 { color: blue; }
header { color: green; }
header h2 { color: inherit; }
Web page title
index.html
A normal header
I should be blue but I'm inheriting green

“The initial keyword applies the initial value of a property to an element.

It is allowed on every CSS property.”
SOURCE: Initial by MDN.

EXAMPLE: COLOR PROPERTY
SOURCE: Color by W3c.

EXAMPLE: FONT-SIZE PROPERTY
SOURCE: Font-size by W3c.

HTML CSS
Browser
INHERITANCE: INITIAL
<body>
<main>
<h1>Here starts the main area<h1>
<article>
</article>
</main>
</body>
p { color: initial; }
Web page title
index.html


HTML CSS
Browser
INHERITANCE: INITIAL + ALL
<body>
<main>
<article>
</article>
</main>
</body>
main {
color: green;
font-size: 200%;
}
p { all: initial; }
Web page title
index.html


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.

HTML CSS
Browser
INHERITANCE: UNSET
<body>
<p>All paragraphs are blue.</p>
<header>
<p>My parent is red but I'm a paragraph.</p>
</header>
<main>
<p>I should be blue but I'm resetting to my
parent's color.</p>
</main>
</body>
p { color: blue; }
header { color: red; }
main p { color: unset; }
Web page title
index.html
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.

HTML CSS
Browser
INHERITANCE: UNSET
<body>
<p>All paragraphs are blue.</p>
<header>
<p>My parent is red but I'm a paragraph.</p>
</header>
<main>
<p>I don't inherit any color from my parent so I
just reset to initial.</p>
</main>
</body>
p { color: blue; }
header { color: red; }
main { /* No color */ }
main p { color: unset; }
Web page title
index.html
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.

inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES

We respect your time 
No more blah blah videos. Just straight to
the point slides with relevant information.
Ready to use code 
Real code you can just copy and paste into
your real projects.
Step by step guides 
Clear and concise steps to build real use
solutions. No missed points.
inarocket.com

14- Learn CSS Fundamentals / Inheritance

More Related Content

What's hot

Similar to 14- Learn CSS Fundamentals / Inheritance

More from In a Rocket

Recently uploaded

14- Learn CSS Fundamentals / Inheritance