From 2771771408011c5c4db8021eb0e2361bb294f9f0 Mon Sep 17 00:00:00 2001
From: Diem-Trang Pham <6422507+pdtrang@users.noreply.github.com>
Date: Fri, 24 Oct 2025 03:56:54 -0500
Subject: [PATCH] feat(curriculum): add interactive examples to named colors
 lesson (#62985)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Thank you for your contribution to the page! 👍
We are happy to accept these changes and look forward to future contributions. 🎉
---
 .../672bc4ff5e7a4bbdee8ba013.md               | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc4ff5e7a4bbdee8ba013.md b/curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc4ff5e7a4bbdee8ba013.md
index 1e9b12373e9..b1c9a714a13 100644
--- a/curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc4ff5e7a4bbdee8ba013.md
+++ b/curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc4ff5e7a4bbdee8ba013.md
@@ -5,22 +5,38 @@ challengeType: 19
 dashedName: what-are-named-colors-in-css
 ---
 
-# --description--
+# --interactive--
 
 In CSS, colors play a crucial role in designing web pages, enhancing readability, setting the mood, and improving user experience. One of the simplest ways to define colors in CSS is by using named colors. Named colors are predefined color names recognized by browsers. Here is an example of using a named color for a paragraph element:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<p>This is a paragraph.</p>
+```
+
 ```css
 p {
   color: red;
 }
 ```
 
+:::
+
 In this example, we're using the named color `red` to style the text in a paragraph.
 
 Named colors in CSS are a collection of 140 standard color names like `red`, `blue`, `yellow`, `aqua`, `fuchsia`, `black`, and so on. These names are simple to use and make your code more readable, and they are self-descriptive. 
 
 Named colors are useful for quick prototyping, simple designs, and improving code readability. Here is an another example of using named colors for an `h1` selector:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<h1>This is a heading</h1>
+```
+
 ```css
 h1 {
   color: navy;
@@ -28,6 +44,8 @@ h1 {
 }
 ```
 
+:::
+
 In this example, the heading text will be styled in navy, with a light gray background. The readability of the code improves since named colors provide an immediate visual understanding of the intended style.
 
 Named colors in CSS are convenient but limited, with only 140 available options. They may not offer the precise shade needed for more detailed designs.