feat(curriculum): add interactive examples to default styling links lesson (#62807)

curriculum/challenges/english/blocks/lecture-styling-lists-and-links/672b952d3a5c603908841971.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: why-are-default-link-styles-important-for-usability-on-the-web
 ---
 
-# --description--
+# --interactive--
 
 Default link styles play a crucial role in enhancing usability and accessibility on the web.
 
@@ -17,6 +17,14 @@ This distinction is fundamental to creating an intuitive and user-friendly brows
 
 Let's consider the basic default styles for links:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<a href="/">Example link</a>
+```
+
 ```css
 a:link {
   color: blue;
@@ -28,6 +36,8 @@ a:visited {
 }
 ```
 
+:::
+
 These styles serve several important functions.
 
 Firstly, the blue color for unvisited links stands out against most background colors and text, making links easily identifiable. This contrast is crucial for users to quickly scan a page and find navigational elements or important information.
@@ -38,10 +48,14 @@ The change in color for visited links (typically to purple) helps users keep tra
 
 Consider this HTML example:
 
+:::interactive_editor
+
 ```html
 <p>Learn more about <a href="https://www.example.com/cats">cats</a> and <a href="https://www.example.com/dogs">dogs</a>.</p>
 ```
 
+:::
+
 Without any custom CSS, most browsers will render these links in blue with an underline. After clicking on one of the links, its color will change to purple, providing immediate feedback to the user about their browsing history.
 
 While it's common for designers to modify these default styles to match a website's aesthetic, it's crucial to maintain the core principles behind them.
@@ -50,6 +64,14 @@ If you choose to change the default styles, ensure that links are still clearly
 
 For example, you might use a custom style like this:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<a href="/">Example link</a>
+```
+
 ```css
 a:link {
   color: blue;
@@ -63,10 +85,20 @@ a:visited {
 }
 ```
 
+:::
+
 This maintains the blue and purple color scheme while replacing the underline with a bottom border for a more modern look.
 
 It's also important to consider the different states of links. In addition to the default and visited states, links typically have hover and active states:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<a href="/">Example link</a>
+```
+
 ```css
 a:hover {
   color: red;
@@ -77,6 +109,8 @@ a:active {
 }
 ```
 
+:::
+
 These states provide immediate feedback to users as they interact with links, enhancing the overall usability of the site.
 
 In conclusion, while it's possible to customize link styles, the principles behind the default styles should be maintained.