CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-07-13 21:15:35 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(curriculum): add interactive examples to named colors lesson (#62985)

Browse Source 
Thank you for your contribution to the page! 👍
We are happy to accept these changes and look forward to future contributions. 🎉
This commit is contained in:
Diem-Trang Pham 2025-10-24 03:56:54 -05:00 committed by GitHub
parent c4ae39851e
commit 2771771408
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc4ff5e7a4bbdee8ba013.md
View File

@ -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.