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

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
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CONTROL INHERITANCE
INITIAL UNSETINHERIT
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
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
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CONTROL INHERITANCE
INITIAL UNSETINHERIT
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
HTML CSS
Browser
INHERITANCE: INITIAL
<body>
<main>
<h1>Here starts the main area<h1>
<article>
<p>We hope you enjoy this article.</p>
</article>
</main>
</body>
main { color: green; }
p { color: initial; }
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
HTML CSS
Browser
INHERITANCE: INITIAL + ALL
<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;
font-size: 200%;
}
p { all: initial; }
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
INITIAL UNSETINHERIT
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
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 { color: green; }
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.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CONTROL INHERITANCE
INITIAL UNSETINHERIT
Learn front-end development at rocket speed
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.
Learn front-end development at rocket speed
inarocket.com
IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Inheritance

More Related Content

What's hot (20)

PDF
HTML Bootstrap Workshop
vincentleeuwen
 
PDF
Web Design Bootcamp - Day1
Aslam Najeebdeen
 
PDF
Getting the most out of Radiant
jomz83
 
PDF
Theme like a monster #ddceu
Marek Sotak
 
PDF
Class 2: CSS Selectors, Classes & Ids
Erika Tarte
 
KEY
Html5的应用与推行
Sofish Lin
 
ODP
Drupal 7 Theming - what's new
Marek Sotak
 
KEY
Flexible site structure with cake php
andygale
 
PDF
Adopt or hack - how to hack a theme in a Drupal way
Marek Sotak
 
PDF
Intro to WordPress theme development
Thad Allender
 
PDF
Layout with CSS
Mike Crabb
 
PDF
Atomicant Drupal 6 Theming
Marek Sotak
 
KEY
Html5 nl
Wilfred Nas
 
PDF
Modular HTML, CSS, & JS Workshop
Shay Howe
 
PDF
Introduction to HTML and CSS
Mario Hernandez
 
PPTX
Web 102 INtro to CSS
Hawkman Academy
 
KEY
ARTDM 171, Week 5: CSS
Gilbert Guerrero
 
PPTX
Introduction to HTML and CSS
danpaquette
 
PPTX
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
 
PDF
Intro to CSS
Randy Oest II
 
HTML Bootstrap Workshop
vincentleeuwen
 
Web Design Bootcamp - Day1
Aslam Najeebdeen
 
Getting the most out of Radiant
jomz83
 
Theme like a monster #ddceu
Marek Sotak
 
Class 2: CSS Selectors, Classes & Ids
Erika Tarte
 
Html5的应用与推行
Sofish Lin
 
Drupal 7 Theming - what's new
Marek Sotak
 
Flexible site structure with cake php
andygale
 
Adopt or hack - how to hack a theme in a Drupal way
Marek Sotak
 
Intro to WordPress theme development
Thad Allender
 
Layout with CSS
Mike Crabb
 
Atomicant Drupal 6 Theming
Marek Sotak
 
Html5 nl
Wilfred Nas
 
Modular HTML, CSS, & JS Workshop
Shay Howe
 
Introduction to HTML and CSS
Mario Hernandez
 
Web 102 INtro to CSS
Hawkman Academy
 
ARTDM 171, Week 5: CSS
Gilbert Guerrero
 
Introduction to HTML and CSS
danpaquette
 
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
 
Intro to CSS
Randy Oest II
 

Similar to 14- Learn CSS Fundamentals / Inheritance (20)

DOCX
INTERNET PROGRAMMING UNIT I REMAINING -SECOND HALF.docx
psaranya21
 
PPTX
Css specificity inheritance and the cascade things you should know
Moneer kamal
 
PDF
CSS INHERITANCE
Anuradha
 
PDF
Introduction to CSS3
RAHUL SHARMA
 
PDF
15- Learn CSS Fundamentals / Color
In a Rocket
 
PDF
11- Learn CSS Fundamentals / Combinators
In a Rocket
 
PDF
lec 6 Advance CSS (Introduction CSS Part B).pdf
kanwalhina636
 
PDF
slides-students-C04.pdf
MonkeyDLuffy708724
 
PPTX
Cascading Style Sheets
Senthil Kumar
 
PPTX
Css Complete Notes
EPAM Systems
 
PDF
basics of css
Priya Goyal
 
PPT
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
Ismaciil2
 
PPT
css1.ppt
BalasundaramSr
 
PPT
DW_lesson2.ppt
JohnpaulStem11
 
PPT
DW_lesson2.ppt
PramenathA
 
PPT
DW_lesson2.ppt
ssuser666f98
 
PPT
DW_lesson2.ppt
UsamaShakeel22
 
PPT
DW_lesson2.ppt
JohnSon872476
 
PPT
CSS Cascading Style Sheet Introduction slides
Aasma13
 
PDF
Chapter 3 - CSS.pdf
wubiederebe1
 
INTERNET PROGRAMMING UNIT I REMAINING -SECOND HALF.docx
psaranya21
 
Css specificity inheritance and the cascade things you should know
Moneer kamal
 
CSS INHERITANCE
Anuradha
 
Introduction to CSS3
RAHUL SHARMA
 
15- Learn CSS Fundamentals / Color
In a Rocket
 
11- Learn CSS Fundamentals / Combinators
In a Rocket
 
lec 6 Advance CSS (Introduction CSS Part B).pdf
kanwalhina636
 
slides-students-C04.pdf
MonkeyDLuffy708724
 
Cascading Style Sheets
Senthil Kumar
 
Css Complete Notes
EPAM Systems
 
basics of css
Priya Goyal
 
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
Ismaciil2
 
css1.ppt
BalasundaramSr
 
DW_lesson2.ppt
JohnpaulStem11
 
DW_lesson2.ppt
PramenathA
 
DW_lesson2.ppt
ssuser666f98
 
DW_lesson2.ppt
UsamaShakeel22
 
DW_lesson2.ppt
JohnSon872476
 
CSS Cascading Style Sheet Introduction slides
Aasma13
 
Chapter 3 - CSS.pdf
wubiederebe1
 
Ad

More from In a Rocket (11)

PDF
3- Learn Flexbox & CSS Grid / Container & items
In a Rocket
 
PDF
2- Learn Flexbox & CSS Grid / Context
In a Rocket
 
PDF
1- Learn Flexbox & CSS Grid / Environment setup
In a Rocket
 
PDF
17- Learn CSS Fundamentals / Units
In a Rocket
 
PDF
16- Learn CSS Fundamentals / Background
In a Rocket
 
PDF
12- Learn CSS Fundamentals / Mix & group
In a Rocket
 
PDF
8- Learn CSS Fundamentals / Attribute selectors
In a Rocket
 
PDF
2- Learn HTML Fundamentals / Text Formatting
In a Rocket
 
PDF
1- Learn HTML Fundamentals / Start in 5 Minutes
In a Rocket
 
PDF
Learn SUIT: CSS Naming Convention
In a Rocket
 
PDF
Learn BEM: CSS Naming Convention
In a Rocket
 
3- Learn Flexbox & CSS Grid / Container & items
In a Rocket
 
2- Learn Flexbox & CSS Grid / Context
In a Rocket
 
1- Learn Flexbox & CSS Grid / Environment setup
In a Rocket
 
17- Learn CSS Fundamentals / Units
In a Rocket
 
16- Learn CSS Fundamentals / Background
In a Rocket
 
12- Learn CSS Fundamentals / Mix & group
In a Rocket
 
8- Learn CSS Fundamentals / Attribute selectors
In a Rocket
 
2- Learn HTML Fundamentals / Text Formatting
In a Rocket
 
1- Learn HTML Fundamentals / Start in 5 Minutes
In a Rocket
 
Learn SUIT: CSS Naming Convention
In a Rocket
 
Learn BEM: CSS Naming Convention
In a Rocket
 
Ad

Recently uploaded (20)

PPTX
原版一样(ANU毕业证书)澳洲澳大利亚国立大学毕业证在线购买
Taqyea
 
PDF
web application development company in bangalore.pdf
https://dkpractice.co.in/seo.html tech
 
PDF
Materi tentang From Digital Economy to Fintech.pdf
Abdul Hakim
 
PPTX
The ARUBA Kind of new Proposal Umum .pptx
andiwarneri
 
PDF
B M Mostofa Kamal Al-Azad [Document & Localization Expert]
Mostofa Kamal Al-Azad
 
PPTX
Lesson 1.1 Career-Opportunities-in-Ict.pptx
lizelgumadlas1
 
PDF
What Is Google Chrome? Fast & Secure Web Browser Guide
hgfdsqetuiplmnvcz43
 
PDF
03 Internal Analysis Strategik Manajemen.pdf
AhmadRifaldhi
 
PPTX
BitRecover OST to PST Converter Software
antoniogosling01
 
PDF
BroadLink Cloud Service introduction.pdf
DevendraDwivdi1
 
PPTX
Class_4_Limbgvchgchgchgchgchgcjhgchgcnked_Lists.pptx
test123n
 
PPTX
My Mother At 66! (2).pptx00000000000000000000000000000
vedapattisiddharth
 
PDF
Clive Dickens RedTech Public Copy - Collaborate or Die
Clive Dickens
 
PDF
ContextForge MCP Gateway - the missing proxy for AI Agents and Tools
Mihai Criveti
 
PDF
I Want to join occult brotherhood for money ritual#((+2347089754903))
haragonoccult
 
PPTX
Q1 English3 Week5 [email protected]
JenniferCawaling1
 
PDF
Slides: Eco Economic Epochs for The World Game (s) pdf
Steven McGee
 
PDF
Google Chrome vs Other Browsers: Why Users Still Prefer It.pdf
hgfdsqetuiplmnvcz43
 
PDF
Transmission Control Protocol (TCP) and Starlink
APNIC
 
PPT
Almos Entirely Correct Mixing with Apps to Voting
gapati2964
 
原版一样(ANU毕业证书)澳洲澳大利亚国立大学毕业证在线购买
Taqyea
 
web application development company in bangalore.pdf
https://dkpractice.co.in/seo.html tech
 
Materi tentang From Digital Economy to Fintech.pdf
Abdul Hakim
 
The ARUBA Kind of new Proposal Umum .pptx
andiwarneri
 
B M Mostofa Kamal Al-Azad [Document & Localization Expert]
Mostofa Kamal Al-Azad
 
Lesson 1.1 Career-Opportunities-in-Ict.pptx
lizelgumadlas1
 
What Is Google Chrome? Fast & Secure Web Browser Guide
hgfdsqetuiplmnvcz43
 
03 Internal Analysis Strategik Manajemen.pdf
AhmadRifaldhi
 
BitRecover OST to PST Converter Software
antoniogosling01
 
BroadLink Cloud Service introduction.pdf
DevendraDwivdi1
 
Class_4_Limbgvchgchgchgchgchgcjhgchgcnked_Lists.pptx
test123n
 
My Mother At 66! (2).pptx00000000000000000000000000000
vedapattisiddharth
 
Clive Dickens RedTech Public Copy - Collaborate or Die
Clive Dickens
 
ContextForge MCP Gateway - the missing proxy for AI Agents and Tools
Mihai Criveti
 
I Want to join occult brotherhood for money ritual#((+2347089754903))
haragonoccult
 
Slides: Eco Economic Epochs for The World Game (s) pdf
Steven McGee
 
Google Chrome vs Other Browsers: Why Users Still Prefer It.pdf
hgfdsqetuiplmnvcz43
 
Transmission Control Protocol (TCP) and Starlink
APNIC
 
Almos Entirely Correct Mixing with Apps to Voting
gapati2964
 

14- Learn CSS Fundamentals / Inheritance

  • 1. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Inheritance
  • 2. 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.
  • 3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com 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 Here starts the main area of this site. We hope you enjoy this article. Inherited
  • 4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com 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
  • 5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CONTROL INHERITANCE INITIAL UNSETINHERIT
  • 6. 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.
  • 7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com 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
  • 8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CONTROL INHERITANCE INITIAL UNSETINHERIT
  • 9. 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.
  • 10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com EXAMPLE: COLOR PROPERTY SOURCE: Color by W3c.
  • 11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com EXAMPLE: FONT-SIZE PROPERTY SOURCE: Font-size by W3c.
  • 12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser INHERITANCE: INITIAL <body> <main> <h1>Here starts the main area<h1> <article> <p>We hope you enjoy this article.</p> </article> </main> </body> main { color: green; } p { color: initial; } Web page title index.html Here starts the main area of this site. We hope you enjoy this article.
  • 13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser INHERITANCE: INITIAL + ALL <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; font-size: 200%; } p { all: initial; } Web page title index.html Here starts the main area of this site. We hope you enjoy this article.
  • 14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CONTROL INHERITANCE INITIAL UNSETINHERIT
  • 15. 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.
  • 16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com 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 { color: green; } 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.
  • 17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com 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.
  • 18. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CONTROL INHERITANCE INITIAL UNSETINHERIT
  • 19. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com YOU CAN CONTINUE THIS COURSE FOR FREE ON + READY TO USE CODE + QUIZZES + FREE UPDATES
  • 20. 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. Learn front-end development at rocket speed inarocket.com
  • 21. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Inheritance