CSS — декларативный язык стилей, превращающий HTML-разметку в оформленную страницу с цветами, шрифтами и макетом. Освоить CSS для начинающих можно за 7 последовательных шагов: синтаксис → подключение к HTML → типографика → блочная модель → селекторы → каскадность → Flexbox и Grid. Понадобятся браузер Chrome или Firefox, редактор VS Code и базовое понимание HTML-тегов. Результат каждого шага виден в браузере сразу.
CSS расшифровывается как Cascading Style Sheets — каскадные таблицы стилей. Это не язык программирования, а декларативный язык стилей: вы описываете, как должен выглядеть элемент, а браузер его отрисовывает. Стандарт поддерживает рабочая группа W3C (Консорциум Всемирной паутины).
Не знаете, с чего ребёнку начать в IT?
Дайте попробовать разные направления: Python, веб-разработку и робототехнику
Хорошая аналогия: HTML — каркас здания (стены, перекрытия, окна), CSS — дизайн интерьера (цвет стен, освещение, расстановка мебели). Ключевой принцип: содержание и оформление разделены. Смените CSS-файл — внешний вид сайта изменится без единого прикосновения к HTML-структуре.
Три технологии веба решают разные задачи.
Новички часто спрашивают: «CSS — это язык программирования?» Нет: в нём нет переменных, условий и циклов. CSS описывает желаемый визуальный результат, а не алгоритм его достижения.
Хотите освоить HTML, CSS и Flexbox на реальных проектах — бесплатно? В курсе «Программирование: Уверенный старт» Модуль 2 целиком посвящён веб-разработке: теги, стили, блочная модель, основы JavaScript и мини-проект TO-DO List. 36 часов онлайн, 0 ₽. Узнайте подробнее на странице курса.
Для старта достаточно трёх вещей.
Создайте папку проекта: внутри — index.html и подпапку styles/ с файлом style.css. Такая структура используется в реальных веб-проектах.
Каждый из семи шагов опирается на предыдущий. Не переходите дальше, пока результат текущего шага не отображается корректно: браузер — лучший инструмент обратной связи на этом пути.
Любой CSS-файл состоит из правил. Одно правило выглядит так:
p {
color: red;
font-size: 16px;
}
p — селектор (выбирает все абзацы), фигурные скобки {} обрамляют блок деклараций. Внутри — пары «свойство: значение свойства», разделённые точкой с запятой ;. Несколько деклараций пишутся в одном правиле. Несколько селекторов группируются через запятую: h1, h2 { … }. CSS-комментарии оформляются так: /* текст */. Это весь базовый синтаксис — остальное его применение.
Способ 1 — внешний файл (предпочтительный): тег <link> в разделе <head>:
<link rel=»stylesheet» href=»styles/style.css»>
Таблица стилей хранится отдельно и подключается к любому количеству HTML-страниц.
Способ 2 — тег <style> внутри HTML: стили прямо в документе. Подходит для быстрых экспериментов, плохо масштабируется.
Способ 3 — inline-стиль: атрибут style=»» на конкретном теге. Имеет наивысший приоритет в каскаде, но поддерживать сложно — каждый элемент правится вручную. Для тех, кто начинает изучать html и css для начинающих с нуля, лучший старт — всегда внешний файл.
Начните с типографики — изменения заметны сразу.
Нестандартный шрифт подключается через Google Fonts: добавьте <link> с адресом шрифта в <head>, затем укажите его название в font-family.
| Формат |
Синтаксис |
Когда использовать |
|---|---|---|
| Именованный | color: red | Прототипы и учебные примеры |
| HEX | color: #ff0000 | Самый частый формат в вёрстке |
| RGB | color: rgb(255, 0, 0) | Динамическое изменение каналов |
| RGBA | color: rgba(255, 0, 0, 0.5) | Прозрачность через alpha-канал |
| HSL | color: hsl(0, 100%, 50%) | Удобно для подбора оттенков |
| HSLA | color: hsla(0, 100%, 50%, 0.5) | HSL + прозрачность |
Каждый HTML-элемент — прямоугольная «коробка» из четырёх концентрических слоёв (изнутри наружу):
Главный «секрет новичка»: добавьте в начало CSS * { box-sizing: border-box; }. По умолчанию браузер работает в режиме content-box — padding и border прибавляются к ширине, и элемент «вылезает» за layout. Режим border-box включает их внутрь: ширина остаётся предсказуемой.
| Тип |
Синтаксис |
Что выбирает |
|---|---|---|
| Элемент | p | Все теги <p> |
| Класс | .card | Элементы с class=»card» |
| ID | #header | Элемент с id=»header» |
| Атрибут | [type=»text»] | Элементы с заданным атрибутом |
| Универсальный | * | Все элементы |
| Потомок | nav a | Ссылки внутри <nav> |
| Дочерний | ul > li | Прямые дочерние <li> |
| Соседний | h2 + p | Абзац сразу после <h2> |
Псевдоклассы описывают состояние элемента: :hover — курсор над ним, :focus — в фокусе ввода, :nth-child(2n) — каждый чётный. Для ссылок соблюдайте порядок LVHA: :link → :visited → :hover → :active. Нарушение порядка — и объявления начнут перекрывать друг друга.
Ребенок хочет изучать программирование? Пусть начнёт с реальных проектов
На курсе школьники создают Telegram-бота, сайт и веб-приложение
Специфичность — числовой вес правила: inline = 1000, #id = 100, .class = 10, тег = 1. При конфликте побеждает объявление с большим суммарным весом.
Буква «C» в CSS — Cascading, «каскадный». Каскадность — механизм, определяющий победителя при конфликте правил. Это одна из главных точек путаницы у тех, кто осваивает CSS для начинающих. Три фактора по убыванию приоритета: источник → специфичность → порядок.
Источники по возрастанию приоритета: стили браузера по умолчанию → авторские (внешний файл → тег <style> → inline) → !important. Злоупотреблять !important не стоит: он перекрывает всю цепочку и превращает отладку в непредсказуемый процесс.
При равной специфичности побеждает последнее объявление в файле. Зачёркнутое правило в DevTools → вкладка Computed означает ровно это: оно проиграло в каскаде.
Наследование свойств CSS — другой механизм. Наследование передаёт значение от родителя к потомку (color, font-family, line-height). Каскадность разрешает конфликт между источниками. Путаница между ними — самая частая причина, по которой стиль «не работает».
По умолчанию браузер располагает элементы в Normal Flow: блочные (div, p, h1) — вертикально один под другим, строчные (span, a) — горизонтально в строке.
Исторически для раскладки использовали float: left/right. Побочный эффект — «схлопывание» родителя: он перестаёт учитывать высоту дочерних float-элементов. Исправляли через clearfix (специальный псевдоэлемент) или overflow: hidden. Флексбокс заменил float для задач выравнивания.
Flexbox (display: flex на родителе): одномерная ось — строка или колонка. justify-content управляет главной осью, align-items — поперечной. Быстро выстраивает элементы в ряд с любым распределением пространства.
CSS Grid (display: grid): двумерная система — строки и столбцы одновременно. grid-template-columns: repeat(3, 1fr) создаёт три равные колонки; единица fr (fractional, дробная) делит свободное пространство пропорционально. gap задаёт расстояние между ячейками.
Практическое правило: кнопки в ряд — Flexbox; сетка карточек — Grid; элемент к краю экрана — position.
Теория закрепляется только в практике. Три задания для тех, кто прошёл все семь шагов:
Проект 1 — Визитка. Простой сайт на html и css: box model, Flexbox для центрирования, типографика. Около 20 строк CSS. Цель: имя по центру, контакты под ним, аватар рядом.
Проект 2 — Список задач. Стилизация формы ввода, чекбоксов и кнопки. Тренируете padding, border, font-family, псевдоклассы :focus и :hover.
Проект 3 — Карточка товара. Grid для раскладки, :hover для интерактивности — подъём тени при наведении, position: relative для бейджа «Новинка» в углу.
Каждый проект объединяет сразу несколько инструментов из семи шагов. Это быстрее переводит знания в навык, чем изолированные упражнения на одно свойство.
После базового CSS логичный маршрут: media queries (адаптив под разные экраны) → CSS-препроцессоры (SASS/LESS — переменные и вложенность) → JavaScript. Полный стек младшего специалиста (Junior): HTML → CSS → JS → React или Vue.
По данным hh.ru за 2025 год, стартовая зарплата Junior-разработчика во фронтенде — от 80 000 ₽. Заработная плата может существенно варьироваться в зависимости от компании, региона и опыта специалиста.
CSS (Cascading Style Sheets) — декларативный язык таблицы стилей для оформления HTML-документов. Задаёт цвета, шрифты, отступы и макеты. Отделяет содержание (HTML) от оформления: дизайн меняется без перестройки структуры страницы. В отличие от JavaScript, CSS не является языком программирования — он описывает желаемый визуальный результат, а не алгоритм его достижения.
Понадобятся браузер Chrome, текстовый редактор VS Code и базовые теги HTML. Обучение строится в 7 шагов: синтаксис → подключение → типографика → блочная модель → селекторы → каскадность → Flexbox/Grid. Первый результат виден уже после первого шага: меняем цвет текста и сразу проверяем в браузере.
Flexbox — одномерная система: элементы выстраиваются в строку или колонку (display: flex). CSS Grid — двумерная: управляет строками и столбцами одновременно (display: grid). Практическое правило: навигация и ряд кнопок — Flexbox; сетка карточек и сложный макет страницы — Grid.
Чаще всего причина — специфичность: правило #id (вес 100) перекрывает .class (вес 10), даже если написано раньше. При равной специфичности побеждает последнее объявление в файле. Проверьте в DevTools → вкладка Computed: зачёркнутое правило проиграло в каскаде.
Каждый HTML-элемент — прямоугольник из 4 слоёв: content (текст/картинка) → padding (внутренний отступ) → border (граница) → margin (внешний отступ). По умолчанию (content-box) ширина не включает padding и border. box-sizing: border-box решает это: заданная ширина учитывает все слои, кроме margin.
Наследуются: color, font-family, font-size, font-weight, font-style, line-height. Не наследуются: margin, padding, border, background, width, height. Задайте font-size: 16px на элементе html — весь текст страницы получит этот размер. Принудительное наследование — inherit; сброс до исходного — initial.
Онлайн-ресурсы: MDN Web Docs — официальная документация W3C с интерактивными примерами; code.mu — русскоязычный практикум с заданиями. Для структурированного обучения с реальными проектами подходит курс «Программирование: Уверенный старт» — Модуль 2 посвящён HTML, CSS и Flexbox. Стоимость — 0 ₽, онлайн, от 4 недель.
Онлайн-учебники не требуют скачивания и всегда актуальны: MDN Web Docs — академические определения с примерами кода; code.mu — практикум на русском языке. Из печатных — «HTML and CSS» Джона Дакетта: визуальный формат, удобен для первого знакомства. Онлайн-ресурсы обновляются быстрее любой книги.
Пусть ребёнок сделает первый IT-проект уже в этом месяце
Бесплатный онлайн-курс с понятной программой, поддержкой и проектами для портфолио
