У нас уже есть скелет страницы — HTML. Но голый скелет выглядит уныло: чёрный текст на белом фоне, стандартный шрифт, всё в одну колонку. Чтобы страница стала красивой и удобной, нужен второй слой — CSS.
CSS — это одежда
Вернёмся к нашему сравнению. HTML — это скелет. А CSS — это одежда и стиль. Он не меняет, что написано на странице, он меняет, как это выглядит.
С помощью CSS ты управляешь:
- цветами — фона, текста, кнопок;
- шрифтами — какой шрифт, какого размера, жирный или обычный;
- размерами — насколько большой заголовок, какой ширины блок;
- расположением — что слева, что справа, что по центру.
Один и тот же скелет можно одеть совершенно по-разному — и страница будет выглядеть как строгий документ или как яркий праздничный сайт.
Как выглядит CSS
CSS говорит: «возьми вот этот элемент и сделай его таким-то». Например, покрасим все заголовки в синий цвет:
h1 {
color: blue;
}
Здесь мы выбрали элемент h1 (тот самый заголовок из прошлого урока) и сказали: его цвет (color) — синий (blue). Содержание заголовка при этом не меняется — меняется только его вид.
Заметка
Самое приятное: содержание и оформление разделены. Ты можешь сто раз поменять цвета и шрифты через CSS, ни разу не тронув сам текст в HTML. Скелет остаётся, меняется только «одежда».
Мини-проверка
Что сделает правило h1 { color: blue; }?
Зачем это знать
Именно CSS превращает скучную страницу в то, на что приятно смотреть. Когда ты понимаешь, что вид и содержание — это два разных слоя, ты начинаешь видеть сайты по-новому: вот это структура, а вот это оформление. Остался последний слой — поведение. Им займётся JavaScript в следующем уроке.