Встановлення фонового кольору в CSS

Вивчаємо властивість background-color, яка дозволяє задавати колір фону HTML-елементів.

Встановлення фонового кольору в CSS

Властивість background-color використовується для зміни кольору фону елементів. Вона працює з тими самими значеннями кольорів, що і властивість color.

HTML/CSS приклад

<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

#elem {
  width: 300px;
  height: 100px;
  color: white;
  background-color: orange;
}

Що вийде

Блок матиме ширину 300px, висоту 100px, білий текст і помаранчевий фон.

Основні значення background-color

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.hex {
  background-color: #2563eb;
}

.rgb {
  background-color: rgb(34, 197, 94);
}

Колір можна задавати назвою, HEX-кодом, RGB або іншими форматами кольорів.

❗ Важливо:

Для простих однотонних фонів використовуйте background-color. Властивість background краще залишати для складних випадків: градієнти, картинки та кілька фонів.

Практичні завдання

📌 Завдання:

№1
Повторіть сторінку за зразком:
Створіть блок:
- ширина 300px;
- висота 150px;
- білий текст;
- зелений фон;
- текст всередині: Welcome!

💡 Показати підказку

Використовуйте властивість background-color для фону та color для тексту.

✅ Показати відповідь

<div class="box">
  Welcome!
</div>

.box {
  width: 300px;
  height: 150px;
  color: white;
  background-color: green;
}

📌 Завдання:

№2
Повторіть сторінку за зразком:
Створіть три блоки:
- перший з червоним фоном;
- другий з синім фоном;
- третій з жовтим фоном.

💡 Показати підказку

Створіть окремі CSS-класи для кожного кольору.

✅ Показати відповідь

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

<div class="red">
  Red block
</div>

<div class="blue">
  Blue block
</div>

<div class="yellow">
  Yellow block
</div>