feat(curriculum): update interactive sections in CSS !important explanation (#62798)

curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f1399cabc2406c3227f.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-important-keyword
 ---
 
-# --description--
+# --interactive--
 
 The `!important` keyword in CSS is used to give a style rule the highest priority, allowing it to override any other declarations for a property.
 
@@ -13,16 +13,30 @@ When used, it forces the browser to apply the specified style, regardless of the
 
 Let's say you have an HTML paragraph element with inline styles like this:
 
+:::interactive_editor
+
 ```html
 <p class="para" style="background-color: lightblue; color: black;">
   This is a paragraph.
 </p>
 ```
 
+:::
+
 In this example, the paragraph element has a background color set to `lightblue` and a text color set to `black`.
 
 The CSS file applies the following styles to the paragraph element:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<p class="para" style="background-color: lightblue; color: black;">
+  This is a paragraph.
+</p>
+```
+
 ```css
 .para {
   background-color: black;
@@ -30,10 +44,22 @@ The CSS file applies the following styles to the paragraph element:
 }
 ```
 
+:::
+
 Since inline styles have a higher precedence than class, ID and type selectors, the black background color and white text color will not be applied to that paragraph element.
 
 To override those inline styles, you can use the `!important` keyword like this:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<p class="para" style="background-color: lightblue; color: black;">
+  This is a paragraph.
+</p>
+```
+
 ```css
 .para {
   background-color: black !important;
@@ -41,6 +67,8 @@ To override those inline styles, you can use the `!important` keyword like this:
 }
 ```
 
+:::
+
 The `!important` keyword is used after the CSS value and before the semicolon.
 
 Now the paragraph element will have those black and white colors applied because the inline styles are being overridden with the use of the `!important` keyword.