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 + +
This is a paragraph.
+``` + ```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 + +