feat(curriculum): add interactive examples to css reset lesson (#63016)

curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-a-css-reset
 ---
 
-# --description--
+# --interactive--
 
 A CSS reset is a stylesheet that removes all or some of the default formatting that web browsers apply to HTML elements. For example, you might have noticed that certain elements, like paragraphs and headings, already have margins by default even if you don't define them explicitly in your custom stylesheets. 
 
@@ -15,6 +15,14 @@ To handle this, a CSS reset removes the default styles. By removing all or some
 
 Custom CSS resets are stylesheets that you create from scratch to fit the need of your project. This way you can control the specific styles that will be reset with a lot of room for flexibility. However, you also need to invest time to develop and maintain the stylesheets. Here's an example of a very common CSS rule for resetting the margin and padding of all HTML elements:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<h1>Example Heading</h1>
+<p>This is a paragraph.</p>
+```
+
 ```css
 * {
   margin: 0;
@@ -22,6 +30,8 @@ Custom CSS resets are stylesheets that you create from scratch to fit the need o
 }
 ```
 
+:::
+
 It's usually written at the top of the CSS stylesheet. The asterisk star selector is a wildcard selector that matches all HTML elements, so they will have a default margin of zero and a default padding of zero on all four sides. This will give you a starting point and then you can customize them in more specific CSS selectors further down in the stylesheet.
 
 You can use this approach to select any HTML element and reset its default styles, just create a custom stylesheet and use the appropriate CSS selectors to match the elements and set the styles.