#16. Что такое CSS: простой пример — меняем цвет и размер текста

В предыдущих уроках мы сверстали уже немало: заголовки, абзацы, списки, таблицы, семантические теги.
Но откройте любую нашу страницу в браузере — она выглядит как весь интернет начала девяностых (годов XX века ;):
чёрный текст на белом фоне, один шрифт на всё. Пора это исправить — и здесь на сцену выходит CSS.

Что такое CSS

CSS (Cascading Style Sheets — «каскадные таблицы стилей») — язык, описывающий внешний вид HTML-страницы. Между HTML и CSS простое разделение труда:

• HTML отвечает за содержимое и структуру: что есть на странице;
• CSS отвечает за оформление: как это выглядит.

Аналогия: HTML — каркас и стены дома, CSS — покраска, обои и мебель. Меняя оформление, можно полностью сменить облик страницы, не тронув ни одного тега в разметке. Краткую историю появления CSS мы уже разбирали в уроке #1.

Простой пример

Создайте в корне учебного сайта (его мы настраивали в уроке #0) файл css.html с самой обычной страницей:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Пробуем CSS</title>
</head>
<body>
    <h1>Мой блог</h1>
    <p>Обычный абзац. Такой же, как миллионы других абзацев в интернете.</p>
</body>
</html>

Откройте страницу в браузере — ничего нового: белый фон, чёрный текст. А теперь добавим двум тегам атрибут style. Это обычный атрибут, как href или src из урока #2, — только его значение пишется на языке CSS:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Пробуем CSS</title>
</head>
<body>
    <h1 style="color: red; font-size: 60px;">Мой блог</h1>
    <p style="color: gray; font-size: 20px;">Этот абзац наконец-то отличается от соседних.</p>
</body>
</html>

Сохраните файл и обновите страницу в браузере (F5): заголовок стал красным и крупным, абзац — серым. Это и есть CSS в действии.

Синтаксис: свойство и значение

Внутри style через точку с запятой перечисляются пары «свойство: значение». В нашем примере использованы две:

color

цвет текста: red, green, gray, orange…

font-size

размер шрифта в пикселях: 16px, 20px, 60px…

Два важных правила:

• свойства и значения пишутся только по-английски: color: red сработает, а цвет: красный — нет, браузер молча проигнорирует незнакомую пару;
• не путайте знаки: двоеточие — внутри пары, точка с запятой — между парами.

О других форматах записи цветов и единицах измерения, кроме пикселей, поговорим дальше в этом разделе курса.

Практика

Возьмите свою страницу из урока #14 (или сверстайте новую: заголовок и два-три абзаца) и раскрасьте её через style: каждый элемент — своим цветом, заголовку — крупный размер. Затем намеренно напишите опечатку — например colour: red — и убедитесь, что браузер не покажет ни ошибки, ни красного цвета: незнакомое правило просто игнорируется. Это пригодится в дальнейшем: «не работает» часто означает «где-то опечатка».

Мы изменили вид страницы, не тронув содержимое, — в этом сила CSS. Но писать стили в атрибуте каждого тега неудобно: представьте страницу из пятидесяти абзацев. В следующем уроке разберём три способа подключения стилей — и почему в реальных проектах стили выносят в отдельный css-файл.