Scribd
Upload
66 views21 pages

Css Fundamentals: Inheritance

The document discusses CSS inheritance and how some CSS properties are inherited by child elements from their parent elements. It provides examples of properties that inherit, such as color, font-size, and list-style properties. It also discusses how to control inheritance using the inherit, initial, and unset keywords. The inherit keyword causes an element to take the computed value from its parent, initial resets a property to its initial value, and unset resets a property to either the inherited value or initial value depending on if it inherits or not.

Uploaded by

Muzamil Hussain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
66 views21 pages

Css Fundamentals: Inheritance

The document discusses CSS inheritance and how some CSS properties are inherited by child elements from their parent elements. It provides examples of properties that inherit, such as color, font-size, and list-style properties. It also discusses how to control inheritance using the inherit, initial, and unset keywords. The inherit keyword causes an element to take the computed value from its parent, initial resets a property to its initial value, and unset resets a property to either the inherited value or initial value depending on if it inherits or not.

Uploaded by

Muzamil Hussain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 21

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 inarocket.com


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
index.html

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 inarocket.com


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 inarocket.com


CONTROL INHERITANCE

INHERIT INITIAL UNSET

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


“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 inarocket.com


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
index.html

A normal header
I should be blue but I'm inheriting green

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


CONTROL INHERITANCE

INHERIT INITIAL UNSET

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


“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 inarocket.com


EXAMPLE: COLOR PROPERTY

SOURCE: Color by W3c.

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


EXAMPLE: FONT-SIZE PROPERTY

SOURCE: Font-size by W3c.

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


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
index.html

Here starts the main area of this site.

We hope you enjoy this article.

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


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
index.html

Here starts the main area of this site.

We hope you enjoy this article.

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


CONTROL INHERITANCE

INHERIT INITIAL UNSET

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


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 inarocket.com


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
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.

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


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
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.

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


CONTROL INHERITANCE

INHERIT INITIAL UNSET

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com


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 miguelsanchez.com
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

You might also like