CSS с нуля: подключение, каскад и блочная модель

CSS описывает, как выглядит HTML. Правило состоит из селектора и блока объявлений. Браузер сопоставляет селектор с элементами DOM и применяет свойства.

Как подключать

Предпочтительно внешний файл через link в head — так стили кэшируются и не смешиваются с контентом. Инлайн-стили оставляйте для редких исключений.

Box model

Каждый элемент — коробка: content, padding, border, margin. С box-sizing: border-box ширина считается предсказуее для вёрстки макетов.

Каскад

При конфликте побеждает более специфичный селектор или то правило, что ниже при равной специфичности. Не лечите всё через !important. Дальше — урок селекторы.

HTML

<link rel="stylesheet" href="styles.css">
<main class="page">
  <h1 class="page__title">Заголовок</h1>
  <p class="page__text">Текст с отступами и цветом из CSS.</p>
</main>

CSS

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Georgia, serif;
  line-height: 1.5;
  color: #1a1a1a;
  background: #f6f3ee;
}
.page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 1.25rem;
}
.page__title {
  margin-top: 0;
  color: #0b3d2e;
}
.page__text {
  padding: 0.75rem 1rem;
  border-left: 4px solid #0b3d2e;
  background: #fff;
}

Практическое задание

Задание: оформите учебную HTML-страницу внешним CSS.

  • Подключение через link, не style в тегах
  • Заданы шрифт, цвет текста и фон страницы
  • У контейнера max-width и центрирование
  • Включён box-sizing: border-box для всех элементов