feat(curriculum): add interactive examples basic CSS review page (#65336)

curriculum/challenges/english/blocks/review-basic-css/671a887a7e62c75e9ab1ee4a.md

@@ -5,7 +5,7 @@ challengeType: 31
 dashedName: review-basic-css
 ---
 
-# --description--
+# --interactive--
 
 ## CSS Basics
 
@@ -29,10 +29,15 @@ selector {
 
 Here is an example of inline CSS:
 
+:::interactive_editor
+
 ```html
+<link rel="stylesheet" href="styles.css">
 <p style="color: red;">This is a red paragraph.</p>
 ```
 
+:::
+
 - **Internal CSS**: These styles are written within the `<style>` tags inside the `head` section of an HTML document. This can be useful for creating short code examples, but usually you will not need be using internal CSS.
 - **External CSS**: These styles are written in a separate CSS file and linked to the HTML document using the `link` element in the `head` section. For most projects, you will use an external CSS file over internal or inline CSS.
 
@@ -49,7 +54,10 @@ Here is an example of inline CSS:
 
 - **Descendant Combinator**: This combinator is used to target elements that are descendants of a specified parent element. The following example will target all `li` items inside `ul` elements.
 
+:::interactive_editor
+
 ```html
+<link rel="stylesheet" href="styles.css">
 <ul>
     <li>Example item one</li>
     <li>Example item two</li>
@@ -63,9 +71,14 @@ ul li {
 }
 ```
 
+:::
+
 - **Child Combinator (`>`)**: This combinator is used to select elements that are direct children of a specified parent element. The following example will target all `p` elements that are direct children of the `container` class.
 
+:::interactive_editor
+
 ```html
+<link rel="stylesheet" href="styles.css">
 <div class="container">
   <p>This will get styled.</p>
 
@@ -82,9 +95,14 @@ ul li {
 }
 ```
 
+:::
+
 - **Next-sibling Combinator (`+`)**: This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follows the `h2` element.
 
+:::interactive_editor
+
 ```html
+<link rel="stylesheet" href="styles.css">
 <h2>I am a sub heading</h2>
 
 <p>This paragraph element will get a red background.</p>
@@ -96,9 +114,14 @@ h2 + p {
 }
 ```
 
+:::
+
 - **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and shares the same parent.
 
+:::interactive_editor
+
 ```html
+<link rel="stylesheet" href="styles.css">
 <div class="container">
   <p>This will not get styled.</p>
   <ul>
@@ -117,6 +140,8 @@ ul ~ p {
 }
 ```
 
+:::
+
 ## Inline, Block, and Inline-Block Level Elements
 
 - **Inline Level Elements**: Inline elements only take up as much width as they need and do not start on a new line. These elements flow within the content, allowing text and other inline elements to appear alongside them. Common inline elements are `span`, `anchor`, and `img` elements.