feat(curriculum): Add interactive examples to id selectors lesson (#62797)

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

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-specificity-for-id-selectors
 ---
 
-# --description--
+# --interactive--
 
 ID selectors are among the most powerful selectors in CSS, allowing developers to apply styles to specific elements with unique identifiers.
 
@@ -15,12 +15,23 @@ ID selectors are defined by a hash symbol (`#`) followed by the ID name. They sh
 
 Here is an example using an ID selector:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<p id="unique">Example paragraph</p>
+<p>Another paragraph</p>
+<p>Yet another paragraph</p>
+```
+
 ```css
 #unique {
   color: purple;
 }
 ```
 
+:::
+
 In this example, the element with the ID `unique` will have its text color set to `purple`.
 
 ID selectors have a very high specificity, higher than type selectors and class selectors, but lower than inline styles. The specificity value for an ID selector is `(0, 1, 0, 0)`.