Первые стили: подключаем CSS и оформляем страницу

Подключите таблицу стилей

Создайте style.css рядом с index.html. В head добавьте link с rel=»stylesheet» и href=»style.css». Такой относительный адрес ищет файл рядом с текущим документом. Если позже перенесёте CSS в папку assets, адрес подключения тоже придётся изменить.

<link rel="stylesheet" href="style.css">

Проверить загрузку можно в Network инструментов разработчика. Откройте страницу заново и найдите style.css. Для локального файла вместо HTTP-статуса могут отображаться особенности file-протокола; после публикации должен приходить успешный ответ с CSS, а не HTML ошибки.

Настройте основу

Начните с небольшого набора правил: блочная модель, шрифт, межстрочный интервал, фон и ограничение ширины текста. Системный шрифт не требует внешней загрузки. Основной контейнер должен сжиматься на узком экране.

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.65;
  color: #202a36;
  background: #f7f8fa;
}
main { max-width: 960px; margin: auto; padding: 24px; }
h1 { line-height: 1.15; color: #11694e; }

Добавьте класс карточки

Назовите класс по роли блока, например .card. В HTML класс указывается без точки, в CSS — с точкой. Отделите внутренний padding от внешнего margin: первый создаёт пространство внутри фона, второй раздвигает соседние блоки.

.card {
  padding: 24px;
  background: white;
  border: 1px solid #dce5df;
  border-radius: 12px;
}

Проверьте изменения

Если правило не применяется, проверьте путь, селектор, закрывающие скобки и перекрывающие объявления. Во вкладке Styles видно, какие свойства зачёркнуты каскадом. Не добавляйте !important прежде, чем поймёте причину.

Попробуйте увеличить текст в карточке в три раза. Она должна растянуться по высоте без обрезки. Далее — адаптивная раскладка. Справка: padding и box-sizing.