Елемент із кількома CSS-класами

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

Елемент із кількома CSS-класами

Одному HTML-елементу можна призначити відразу кілька CSS-класів. Для цього в атрибуті class потрібно перелічити назви класів через пробіл.

Наприклад, нехай існують два класи:

.error {
  color: red;
}

.large {
  font-size: 30px;
  font-family: Arial;
}

Тепер призначимо абзацу одразу обидва класи:

<p class="error large">
  lorem ipsum
</p>

У результаті до абзацу будуть застосовані стилі з класу error і одночасно стилі з класу large.

❗ Важливо:

Один клас може відповідати за колір тексту, інший — за розмір шрифту, третій — за рамку або відступи. Це дозволяє легко комбінувати стилі та уникати дублювання CSS-коду.

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

📌 Завдання:

№1
Нехай задані такі CSS-класи:
.success { color: green; } .error { color: red; } .large { font-size: 30px; } .small { font-size: 20px; }
Створіть 4 абзаци.
• Перший — зелений і з великим шрифтом.
• Другий — червоний і з маленьким шрифтом.
• Третій — червоний і з великим шрифтом.
• Четвертий — зелений і з маленьким шрифтом.
№2
Створіть три власні CSS-класи.
Потім призначте одному HTML-елементу всі три класи одночасно.

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

Щоб застосувати кілька класів до одного елемента, запишіть їх в атрибуті class через пробіл.

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

№1

HTML:

<p class="success large">
  Перший абзац
</p>

<p class="error small">
  Другий абзац
</p>

<p class="error large">
  Третій абзац
</p>

<p class="success small">
  Четвертий абзац
</p>

№2

CSS:

.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}

.center {
  text-align: center;
}

HTML:

<p class="blue bold center">
  Текст
</p>