fix(curriculum): add interactive examples to default browser styles (freeCodeCamp#62762)

Author: arizfaiyaz

curriculum/challenges/english/blocks/lecture-what-is-css/672acbdd06b44c4cd3bf8713.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-are-some-default-browser-styles-applied-to-html
 ---
 
-# --description--
+# --interactive--
 
 When you start working with HTML and CSS, you'll notice that some styles are applied to your web pages even before you write any CSS. These styles are called "default browser styles" or "user-agent styles".
 
@@ -23,6 +23,8 @@ These heading tags help define the hierarchy and structure of your content.
 
 The following example shows all six heading elements from `h1` to `h6`.
 
+:::interactive_editor
+
 ```html
 <h1>Heading 1</h1>
 <h2>Heading 2</h2>
@@ -32,10 +34,14 @@ The following example shows all six heading elements from `h1` to `h6`.
 <h6>Heading 6</h6>
 ```
 
+:::
+
 Another element with default styles is the `hr` element, which creates a horizontal rule often used to visually separate sections of content. Browsers generally apply a simple line style to this element.
 
 To understand it better, let's look at this code example:
 
+:::interactive_editor
+
 ```html
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
@@ -44,6 +50,8 @@ To understand it better, let's look at this code example:
 <p>Paragraph 4</p>
 ```
 
+:::
+
 The horizontal rule appears as a thin line with spacing above and below the text to distinguish between sections of content.
 
 Next, we will look at the `blockquote` element.
@@ -54,6 +62,8 @@ The indentation helps set blockquotes apart from the rest of the text, making it
 
 Let's take a look at this code example:
 
+:::interactive_editor
+
 ```html
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
@@ -62,12 +72,16 @@ Let's take a look at this code example:
 <p>Paragraph 4</p>
 ```
 
+:::
+
 In the example above, the `blockquote` element will produce an indent on the text, applied by the default browser styles.
 
 Another element with default styles is the anchor element (`<a>`), which is styled with a default blue color and underlining to make it recognizable as a link.
 
 Let's take at look at the following HTML example:
 
+:::interactive_editor
+
 ```html
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
@@ -76,6 +90,8 @@ Let's take at look at the following HTML example:
 <p>Paragraph 4</p>
 ```
 
+:::
+
 The above code has four paragraph elements with an anchor element in the middle. The anchor element is styled in blue with an underline to show users to go to the freeCodeCamp learn page.
 
 Finally, we'll look at the unordered and ordered list elements.
@@ -84,6 +100,8 @@ Browsers add basic formatting to lists, including indentation and bullets or num
 
 Let's take a look at an example:
 
+:::interactive_editor
+
 ```html
 <p>Sample Paragraph</p>
 <ol>
@@ -99,6 +117,8 @@ Let's take a look at an example:
 <p>Ending Paragraph</p>
 ```
 
+:::
+
 In the above code example, we are using an unordered list and an ordered list. Both of these lists will be slightly indented to the right by default.
 
 For all of these examples, you saw how the browser applied default spacing, varying font sizes, and weights to these HTML elements.