Что делает CSS

Один CSS-файл может сразу изменить оформление всех страниц сайта. Это был главный довод в пользу CSS, когда W3C опубликовал CSS level 1 в декабре 1996 года.

Структура в HTML, внешний вид в CSS

HTML говорит, чем является каждая часть страницы: заголовком, списком, формой. CSS, сокращение от Cascading Style Sheets («каскадные таблицы стилей»), говорит, как эти части должны выглядеть: их цвета, шрифты, размеры, отступы и положение на экране. Разделение даёт практическую пользу. Можно изменить внешний вид всего сайта, отредактировав одну таблицу стилей; один и тот же HTML может выглядеть по-разному на телефоне, большом мониторе и на бумаге; а читатели могут применять свои стили, например крупный текст, не ломая страницу.

Хокон Виум Ли начал работу над CSS в CERN в октябре 1994 года, Берт Бос присоединился к ней в 1995 году, а 17 декабря 1996 г. W3C опубликовал CSS level 1 как рекомендацию. В мае 1998 года вышел CSS 2. С тех пор CSS разделён на модули, например Color, Selectors, Flexbox и Grid, и каждый развивается в своём темпе в рабочей группе W3C по CSS. Единого CSS4 нет; рабочая группа публикует сводку, в которой перечислено, какие модули стабильны.

Устройство правила

Таблица стилей состоит из списка правил. Каждое правило начинается с селектора, который говорит, к каким элементам оно относится, а за ним идёт блок объявлений в фигурных скобках. Внутри блока каждое объявление состоит из свойства, двоеточия, значения и точки с запятой. В правиле выше h1 выбирает все заголовки первого уровня, а два объявления делают их синими и высотой 32 пикселя. Пробелы и переносы строк внутри правила не важны, поэтому большинство пишет каждое объявление на отдельной строке, чтобы его было легко читать.

Если браузер встречает объявление, которого не понимает, например свойство с опечаткой или бессмысленное значение, он пропускает только это объявление и переходит к следующему. Так сделано намеренно: новые возможности CSS можно добавлять, не ломая старые браузеры. Обратная сторона в том, что одна пропущенная точка с запятой может незаметно «проглотить» следующее объявление, потому что два объявления сливаются в одно недопустимое. Если стиль не применяется, сначала проверь знаки препинания. Комментарии пишут /* like this */.

Три способа подключить CSS

<!-- 1. External stylesheet: one file for the whole site -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Internal stylesheet: rules for this page only -->
<style>
  p { line-height: 1.5; }
</style>

<!-- 3. Inline style: one element only -->
<p style="color: green;">Fresh today</p>

Внешняя таблица стилей, подключённая в <head> через <link rel="stylesheet">, является обычным выбором для настоящего сайта: все страницы используют её совместно, а браузер загружает её один раз и хранит в кеше. Элемент <style> содержит правила для одной страницы, и именно так устроены упражнения этого курса. Атрибут style применяет объявления к одному элементу; он удобен для быстрой проверки, но его трудно поддерживать, потому что одно и то же оформление приходится повторять на каждом элементе.

У браузера уже есть стили

Даже у страницы без CSS есть какое-то оформление: заголовки крупные и жирные, ссылки синие и подчёркнутые, у списков есть отступ. Всё это берётся из таблицы стилей браузера по умолчанию, она называется таблицей стилей агента пользователя (user agent stylesheet). Твои правила применяются поверх неё. Поэтому страница пекарни из курса HTML читалась ещё до того, как у неё появился CSS, и поэтому хорошая таблица стилей меняет только то, что нужно.