feat(curriculum): Add interactive examples to CSS inheritance lesson (#62800)

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
 <div style="color: blue;">
   This is the parent element.
@@ -24,6 +26,8 @@ For instance, consider the following example where a parent `div` element has it
 </div>
 ```
 
+:::
+
 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
 <div style="padding: 20px;">
   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
 </div>
 ```
 
+:::
+
 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.