From cef48ce2e8e8e08ee5510b769cbc26a27a8d4e80 Mon Sep 17 00:00:00 2001
From: Ariz Faiyaz <arizfaiyazwork@gmail.com>
Date: Wed, 15 Oct 2025 05:53:39 +0530
Subject: [PATCH] feat(curriculum): update interactive sections in CSS
 `!important` explanation (#62798)

---
 .../672b8f1399cabc2406c3227f.md               | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f1399cabc2406c3227f.md b/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f1399cabc2406c3227f.md
index aa4bc517fd9..4e6dfad4f16 100644
--- a/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f1399cabc2406c3227f.md
+++ b/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.