CSS

HTML отвечает за то, что на странице: заголовок, абзац, список, форма. CSS отвечает за то, как это выглядит. Разделение появилось в середине 1990-х, когда оформление начали выносить из разметки в отдельные таблицы стилей. Один файл стилей подключается ко всем страницам, и смена фирменного цвета занимает минуту, а не неделю.

Стилевое правило состоит из селектора и блока объявлений. Селектор выбирает элементы, объявления задают свойства и значения.

Пример правил

:root { --accent: #1f6feb; }

.card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: 8px;
}
.card__button { background: var(--accent); color: #fff; }

@media (max-width: 600px) {
  .card { padding: 16px; }
}

Здесь цвет вынесен в переменную, карточка раскладывается сеткой, а на узких экранах отступы уменьшаются через медиазапрос.

Почему стиль применился не так

Самый частый вопрос новичков — «я написал правило, а оно не работает». Обычно виноват каскад: к одному элементу подходит несколько правил, и браузер выбирает победителя. Сначала сравнивается происхождение и пометка !important, затем специфичность селектора (идентификатор весомее класса, класс весомее тега), и только при равенстве — порядок в коде. Поэтому правило темы с селектором #content .entry p перебьёт ваше .entry p, даже если ваше подключено позже. Разобраться помогает вкладка стилей в инструментах разработчика: зачёркнутые свойства показывают, кто кого перекрыл.

Что дал современный CSS

• Flexbox и Grid — раскладка без обтеканий и таблиц.
• Пользовательские свойства — переменные, которые меняются на лету, например для тёмной темы.
• Медиазапросы и контейнерные запросы — адаптация под ширину экрана или блока.
• Переходы и анимации без JavaScript.

Многое из того, для чего раньше требовались препроцессоры и скрипты, теперь решается стандартными средствами браузера.