# CSS: как страница выглядит

Курс: Claude Code и терминал: с 0 — https://zero2claude.ru/learn/code-terminal
Канонический URL: https://zero2claude.ru/learn/code-terminal/9-3-css

CSS — это слой, который отвечает за внешний вид страницы: цвета, шрифты, размеры и расположение. HTML — скелет, CSS — стиль.

У нас уже есть скелет страницы — HTML. Но голый скелет выглядит уныло: чёрный текст на белом фоне, стандартный шрифт, всё в одну колонку. Чтобы страница стала красивой и удобной, нужен второй слой — **CSS**.

## CSS — это одежда

Вернёмся к нашему сравнению. HTML — это скелет. А **CSS** — это одежда и стиль. Он не меняет, *что* написано на странице, он меняет, *как* это выглядит.

С помощью CSS ты управляешь:

- **цветами** — фона, текста, кнопок;
- **шрифтами** — какой шрифт, какого размера, жирный или обычный;
- **размерами** — насколько большой заголовок, какой ширины блок;
- **расположением** — что слева, что справа, что по центру.

Один и тот же скелет можно одеть совершенно по-разному — и страница будет выглядеть как строгий документ или как яркий праздничный сайт.

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

CSS говорит: «возьми вот этот элемент и сделай его таким-то». Например, покрасим все заголовки в синий цвет:

```css
h1 {
  color: blue;
}
```

Здесь мы выбрали элемент `h1` (тот самый заголовок из прошлого урока) и сказали: его цвет (`color`) — синий (`blue`). Содержание заголовка при этом не меняется — меняется только его вид.

Самое приятное: содержание и оформление разделены. Ты можешь сто раз поменять цвета и шрифты через CSS, ни разу не тронув сам текст в HTML. Скелет остаётся, меняется только «одежда».

## Зачем это знать

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