Как задать несколько классов CSS

Чтобы задать несколько классов CSS одному HTML-элементу, нужно перечислить классы через пробел в атрибуте class. Например:

<div class="green-box round-border"></div>

В данном случае HTML-элемент div получит два класса: green-box и round-border.

Задав несколько классов, можно применить различные стили, определенные для каждого класса. Например, для класса green-box могут быть заданы стили для цвета фона:

.green-box {
  background-color: green;
}

А для класса round-border — стили для скругленных рамок:

.round-border {
  border-radius: 10px;
}

При этом HTML-элемент, имеющий оба класса, получит и цвет фона, и скругленные рамки:

<div class="green-box round-border"></div>

Несколько классов можно применять и к текстовым элементам, например:

<p class="red bold">Красный жирный текст</p>

.red {
  color: red;
}

.bold {
  font-weight: bold;
}