feat(curriculum): added interactive examples to type selector lessons (#62766)

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

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-specificity-for-type-selectors
 ---
 
-# --description--
+# --interactive--
 
 Type selectors, also known as element selectors, target elements based on their tag name.
 
@@ -15,12 +15,24 @@ Type selectors are straightforward to use and are written simply as the tag name
 
 Here is an example of a type selector targeting all paragraph elements on the page:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<p>Paragraph one</p>
+<p>Paragraph two</p>
+<p>Paragraph three</p>
+```
+
 ```css
 p {
   color: blue;
 }
 ```
 
+:::
+
 In this example, all `p` elements will have their text color set to `blue`.
 
 Type selectors have a relatively low specificity compared to other selectors. The specificity value for a type selector is `(0, 0, 0, 1)`.
@@ -31,15 +43,28 @@ Let's take a look at an example where the class selectors will override the styl
 
 Here is an example with two paragraph elements:
 
+:::interactive_editor
+
 ```html
 <p class="para">I am a paragraph</p>
 <p class="para">Here is another paragraph</p>
 ```
 
+:::
+
 Both paragraph elements have a class called `para`.
 
 Inside the CSS file, the type selector targets paragraphs, and the class selector targets elements with the `para` class.
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<p class="para">I am a paragraph</p>
+<p class="para">Here is another paragraph</p>
+```
+
 ```css
 p {
   color: blue;
@@ -50,6 +75,8 @@ p {
 }
 ```
 
+:::
+
 All paragraphs on the page with the class of `para` will have the text color set to `red` instead of `blue` because class selectors have a higher specificity than type selectors.
 
 # --questions--