Сайты состоят не просто из строк текста, а из логических блоков. Главный инструмент для этого — тег <div> (невидимая коробка).
Чтобы в CSS покрасить не все коробки разом, а конкретную, мы даем ей имя — класс. Например: class="card".
<!-- HTML часть -->
<div class="card">
<p>Текст внутри карточки</p>
</div>
/* CSS часть (точка перед именем обязательна!) */
.card {
background-color: #ffffff;
padding: 15px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}