Урок 26 із 239
11%
← Назад

Ключові слова для кольору в CSS

Навчіться змінювати колір HTML-елементів за допомогою стандартних назв кольорів CSS.

Ключові слова для кольору в CSS

У CSS можна задавати кольори не тільки за допомогою складних значень, а й використовуючи готові ключові слова.

Ключове слово — це англійська назва кольору, яку браузер розуміє та автоматично перетворює у відповідний колір.

Приклади кольорів CSS

CSS значенняКолір
redчервоний
greenзелений
blueблакитний
yellowжовтий
orangeоранжевий
blackчорний
whiteбілий

Приклад використання

h1 {
  color: green;
}

h2 {
  color: blue;
}

p {
  color: orange;
}

У цьому прикладі кожен HTML-елемент отримує власний колір через CSS-селектор.

  • h1 буде зеленого кольору.
  • h2 буде блакитного кольору.
  • h3 буде червоного кольору.
  • Абзаци p будуть оранжевого кольору.
❗ Важливо:

Ключові слова кольорів зручні для навчання та простих проектів. У реальних проектах частіше використовують HEX, RGB або HSL кольори.

📌 Завдання:
  1. Створіть CSS-селектори для h1, h2, h3 та p.
  2. Задайте h1 зелений колір.
  3. Задайте h2 блакитний колір.
  4. Задайте h3 червоний колір.
  5. Задайте абзацам p оранжевий колір.
💡 Показати підказку

Для зміни кольору тексту використовуйте властивість color.

✅ Показати відповідь
styles.css:

h1 {
  color: green;
}

h2 {
  color: blue;
}

h3 {
  color: red;
}

p {
  color: orange;
}