Learn CSS inheritance at rocket speed
•
0 likes•165 views
Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How some properties on a selector are inherited by all the children of that selector. - List of properties that inherit. - How to override inherited values and prevent inheritance in CSS. - How to reset a property to its inherited or initial value. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/inheritance.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Learn CSS inheritance at rocket speed
Similar to Learn CSS inheritance at rocket speed (20)
More from In a Rocket
More from In a Rocket (11)
Recently uploaded
Recently uploaded (20)
Learn CSS inheritance at rocket speed
- 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