Пошаговое руководство

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

Время чтения: 12 минут  •  Уровень: с нуля

Что такое CSS и почему без него никуда

Если HTML — это скелет сайта, то CSS (Cascading Style Sheets) — его кожа, одежда и характер. Заголовки, цвета, отступы, анимации, адаптация под экран телефона — всё это делает CSS. Без него любая страница выглядела бы как документ из 90-х: чёрный текст на белом поле, синие ссылки и ноль эстетики.

🦴
HTML
Структура и смысл: заголовки, абзацы, картинки, формы
🎨
CSS
Внешний вид: цвета, шрифты, сетки, анимации, адаптивность
⚡
JavaScript
Поведение: клики, попапы, динамическая загрузка данных

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

Нажмите на вкладку, чтобы увидеть код и понять разницу:

<link rel="stylesheet" href="style.css">

Когда использовать: всегда, когда это возможно. Один файл стилей на весь сайт — изменил один раз, поменялось везде. Кэшируется браузером, ускоряет загрузку.

💡 Правило профессионала: 99% кода — во внешнем файле. Всё остальное — компромиссы.

Создаем сайт CSS за 5 шагов

1

Каркас на HTML

Создаётся файл index.html с семантическими тегами: header, nav, main, footer. Семантика помогает и поисковикам, и скринридерам.

2

Подключение style.css

Рядом создаётся файл style.css и подключается в <head> через тег link. С этого момента сайт готов к оформлению.

3

Базовая типографика и сброс

Задаются box-sizing: border-box для всех элементов, убираются лишние отступы, выбирается шрифты и межстрочный интервал. Это фундамент, без которого вёрстка «плывёт».

4

Сетка на Flexbox и Grid

Flexbox идеален для одномерных раскладок (меню, карточки в ряд), Grid — для двумерных (вся страница целиком). Флоаты и табличная вёрстка остались в прошлом десятилетии.

5

Адаптивность через медиазапросы

Правило mobile-first: сначала стили для телефона, затем через @media (min-width: 768px) — расширение под планшет и десктоп.

Почувствуйте силу одного свойства

Двигайте ползунок и смотрите, как меняет отступы одно значение border-radius:

border-radius: 0px

Flexbox против Grid: что выбрать

Критерий Flexbox Grid
Направление Одна ось (строка или колонка) Две оси одновременно
Лучше всего для Меню, кнопки, ряды карточек Общая сетка страницы, галереи
Порог входа Низкий — осваивается за вечер Средний — пара дней практики
Поддержка браузеров 98%+ 97%+

💡 Это не соперники: на реальных проектах Grid строит каркас страницы, а Flexbox раскладывает содержимое внутри ячеек.

Из чего состоит типичный CSS-файл

100% кода
Раскладка (Flex, Grid, позиционирование) 32%
Типографика и цвета 20%
Отступы и размеры блоков 14%
Анимации и переходы 10%
Медиазапросы и прочее 24%

Топ-5 ошибок новичков

01 — Злоупотребление !important

Каждый !important — это признание, что каскад проигран. Через месяц такой файл невозможно редактировать.

02 — Фиксированные высоты

Контент растёт, фиксированная высота — нет. Результат: текст, вылезающий за границы блока.

03 — Пиксели везде

Месяц такой код работает ровно до первой правки: rem и em масштабируются вместе с настройками пользователя, px — нет. Доступность страдает первой.

04 — Игнорирование mobile-first

Вёрстка «от десктопа» приводит к двойной работе: сначала нагромождение, потом его демонтаж под телефон.

05 — Копипаст без понимания

Украденный фрагмент кода работает ровно до первой правки. Понимание работает всегда.

🚀

Вывод прост и жестоко честен

Создать сайт на CSS — не сложнее, чем заварить кипяток. Сложнее — не остановиться: каждый сверстанный макет добавляет мышечную память, и уже через десяток проектов каскадные таблицы стилей превращаются из противника в самый послушный инструмент в арсенале.