From 3a4872de3a20530b4cd629ba8cd5ae717c04e82e Mon Sep 17 00:00:00 2001 From: Ariz Faiyaz Date: Wed, 15 Oct 2025 05:48:27 +0530 Subject: [PATCH] feat(curriculum): Add interactive examples to CSS inheritance lesson (#62800) --- .../672b8f382370e025aadd3f4e.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f382370e025aadd3f4e.md b/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f382370e025aadd3f4e.md index 8ab9c0400ca..6cc26bb2b8d 100644 --- a/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f382370e025aadd3f4e.md +++ b/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f382370e025aadd3f4e.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: how-does-inheritance-work-with-css-at-a-high-level --- -# --description-- +# --interactive-- Inheritance is a key concept in CSS that determines how styles are passed down from parent elements to their child elements. @@ -17,6 +17,8 @@ In CSS, not all properties are inherited by default. For example, properties lik For instance, consider the following example where a parent `div` element has its color set using an inline style, and the child `p` element inherits that color: +:::interactive_editor + ```html
This is the parent element. @@ -24,6 +26,8 @@ For instance, consider the following example where a parent `div` element has it
``` +::: + In this case, both the parent `div` and the child `p` will display their text in blue because the color is inherited. On the other hand, properties like `margin`, `padding`, `border`, and `background` are not inherited by default. If you want a child element to inherit these styles, you need to explicitly set them, either directly on the child element or by using the `inherit` keyword. @@ -32,6 +36,8 @@ The `inherit` keyword can be used to force inheritance of a property from a pare For example, if you want a specific child element to have the same `padding` as its parent, you can set `padding: inherit` on the child element: +:::interactive_editor + ```html
This is the parent element with padding. @@ -39,6 +45,8 @@ For example, if you want a specific child element to have the same `padding` as
``` +::: + In this case, the child `p` element will inherit the `20px` of padding from its parent `div` element. Inheritance is especially useful for maintaining consistency and reducing redundancy in your stylesheets.