Что такое CSS и зачем он нужен

Знакомимся со вторым слоем веб-страницы — оформлением — и разбираемся, зачем его отделили от разметки.

CSS (Cascading Style Sheets, «каскадные таблицы стилей») — язык, который описывает, как должны выглядеть элементы HTML-страницы.

HTML говорит «что», CSS говорит «как»

Вы уже знаете, что HTML размечает содержимое: вот заголовок, вот абзац, вот ссылка. Но сам по себе HTML почти не управляет внешним видом. Браузер показывает чистую разметку скучно: чёрный текст на белом фоне, заголовки покрупнее, ссылки синие и подчёркнутые. Всё.

CSS добавляет к этой структуре оформление. Он отвечает на вопросы «какого цвета текст?», «какой шрифт и размер?», «сколько отступа вокруг блока?», «где этот элемент стоит на странице?». Одна и та же разметка с разными стилями может выглядеть как строгий банковский сайт или как яркий детский блог.

Зачем отделять оформление от содержимого

Можно было бы прописывать цвета и размеры прямо в каждом теге. Но представьте сайт из ста страниц, где на всех нужно поменять цвет ссылок. Если оформление вшито в разметку — придётся править сто файлов. Если стили вынесены в отдельный CSS-файл — меняете одну строку, и обновляется весь сайт.

Это главная идея CSS: разделение содержимого и оформления. HTML отвечает за смысл, CSS — за вид. Так код проще читать, поддерживать и переиспользовать.

Как выглядит CSS

Вот крошечный пример. Слева — разметка, справа — стиль для неё. Пока не разбираем синтаксис детально, просто почувствуйте вид:

<h1>Привет, CSS!</h1>
<p>Это мой первый стилизованный абзац.</p>

h1 {
  color: teal;
  font-size: 32px;
}

p {
  color: gray;
}

Результат: заголовок станет бирюзовым и крупным (32 пикселя), а абзац — серым. Мы взяли скучную чёрно-белую страницу и за пять строк задали ей характер.

Откуда взялось слово «каскадные»

Слово «cascading» («каскадные») в названии не случайно. К одному элементу могут применяться несколько правил из разных источников: стили браузера по умолчанию, стили автора сайта, иногда стили пользователя. CSS определяет порядок, в котором эти правила «стекают» друг на друга, словно вода по каскаду, и решает, какое победит. Подробно каскад мы разберём в отдельном уроке — пока запомните, что это про разрешение конфликтов правил.

Три слоя страницы

Этот курс целиком про средний слой. Освоив его, вы сможете превратить любую разметку в красивую и удобную страницу.

Итог

• CSS описывает внешний вид элементов: цвета, шрифты, отступы, расположение.
• Оформление отделяют от содержимого, чтобы менять вид всего сайта в одном месте.
• «Каскадные» — потому что CSS умеет разрешать конфликты нескольких правил для одного элемента.