Что такое CSS?

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

CSS позволяет отделить содержание от представления, что делает код чище, а сайт — легче в поддержке и обновлении.

• Цвета и фоны — оформление элементов, градиенты, тени.
• Типографика — шрифты, размеры, межстрочные интервалы.
• Макетирование — Flexbox, Grid, позиционирование.
• Адаптивность — медиазапросы и мобильная вёрстка.
• Анимация — переходы, трансформации, keyframes.

Краткая история CSS

• 1994 — Хокон Виум Ли предложил концепцию каскадных таблиц стилей.
• 1996 — вышел CSS 1.0, первые браузеры начали поддерживать базовые свойства.
• 1998 — опубликован CSS 2.0, добавивший позиционирование и медиазапросы.
• 2011 — началась разработка CSS 3, разбитого на независимые модули.
• Сегодня — CSS продолжает развиваться: Grid, Flexbox, переменные, контейнерные запросы, `:has()` и другие возможности.

Зачем изучать CSS?

CSS — один из трёх базовых языков веб-разработки наряду с HTML и JavaScript. Без него невозможно создать современный сайт.

• Востребованность — навыки CSS нужны каждому front-end разработчику и верстальщику.
• Простота старта — синтаксис CSS интуитивно понятен и легко осваивается новичками.
• Универсальность — CSS работает во всех браузерах и на всех устройствах.
• Карьерные возможности — от верстки лендингов до разработки сложных интерфейсов.

Основные понятия CSS

• Селектор — указывает, к какому элементу применяется стиль.
• Свойство — характеристика элемента (например, `color`).
• Значение — конкретное значение свойства (например, `red`).
• Правило — селектор + блок объявлений в фигурных скобках.
• Каскад — механизм определения приоритетов между стилями.
• Специфичность — вес селектора при конфликте стилей.
• Наследование — передача свойств от родителя к потомку.
• Блочная модель — `margin`, `border`, `padding`, `content`.

Инструменты для работы с CSS

• Браузерные DevTools — отладка и просмотр стилей в реальном времени.
• VS Code — популярный редактор с расширениями для CSS.
• CodePen — онлайн-песочница для быстрых экспериментов.
• Can I use — проверка поддержки свойств браузерами.
• Sass / Less — препроцессоры, расширяющие возможности CSS.
• PostCSS — инструмент автоматической обработки CSS.
• Stylelint — линтер для проверки качества CSS-кода.

Как проходит обучение

Учебник построен по принципу «от простого к сложному» и включает практику на каждом шаге.

1. Теория — краткое объяснение каждой темы с примерами.
2. Онлайн-редактор — изменение кода и мгновенный просмотр результата.
3. Упражнения — закрепление материала через интерактивные задания.
4. Тесты — проверка знаний по пройденным главам.
5. Справочник — быстрый доступ ко всем свойствам и селекторам.

Что нужно для начала

• Базовое знание HTML.
• Компьютер или ноутбук с доступом в интернет.
• Современный браузер (Chrome, Firefox, Edge, Safari).
• Желание практиковаться — минимум 30 минут в день.

Структура курса

Учебник разбит на логические разделы, которые рекомендуется проходить по порядку.

• Введение — что такое CSS, способы подключения, синтаксис.
• Основы — селекторы, цвета, шрифты, текст, блоки.
• Макетирование — блочная модель, Flexbox, Grid, позиционирование.
• Адаптивность — медиазапросы, адаптивные изображения, mobile-first.
• Продвинутое — анимация, трансформации, переменные, препроцессоры.
• Практика — примеры, упражнения, тесты, проекты.

Советы новичкам

• Практикуйтесь каждый день, даже по 20–30 минут.
• Повторяйте примеры вручную, а не копируйте.
• Используйте DevTools для экспериментов со стилями.
• Начинайте с простых макетов, постепенно усложняя.
• Изучайте чужой код на CodePen и GitHub.
• Не бойтесь ошибок — они лучший учитель.

Примеры в каждой главе

Этот учебник по CSS содержит сотни примеров CSS.

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

Нажмите на кнопку «Попробуйте сами», чтобы увидеть, как это работает.

CSS Примеры

Учитесь на более чем 300 примерах! С помощью нашего редактора вы можете отредактировать CSS и нажать на кнопку, чтобы просмотреть результат.

Перейдите к примерам CSS!

Воспользуйтесь меню

Мы рекомендуем читать это руководство в последовательности, указанной в меню.

Если у вас большой экран, меню всегда будет отображаться слева.

Если у вас маленький экран, откройте меню, нажав на значок верхнего меню ☰.

CSS Шаблоны

Мы создали несколько адаптивных шаблонов SW3.CSS для вашего использования.

Вы можете свободно изменять, сохранять, делиться и использовать их во всех своих проектах.

Бесплатные шаблоны CSS!

Практика CSS

<style>
 {
 red;
}
</style>
                    

CSS Тестирование

Проверьте свои навыки работы с CSS с помощью викторины.

Начать тест по CSS!

Часто задаваемые вопросы

Глоссарий

Селектор

Часть CSS-правила, определяющая, к каким элементам применяется стиль.

Каскад

Порядок применения стилей с учётом специфичности и источника.

Специфичность

Вес селектора, определяющий приоритет при конфликте стилей.

Блочная модель

Схема расчёта размеров элемента: content, padding, border, margin.

Flexbox

Модуль CSS для гибкого одномерного макетирования.

Grid

Модуль CSS для двумерного макетирования на основе сетки.

Медиазапрос

Конструкция `@media`, применяющая стили при определённых условиях.

Препроцессор

Инструмент (Sass, Less), расширяющий синтаксис CSS и компилируемый в обычный CSS.

Полезные ресурсы

• MDN Web Docs — CSS
• Can I use — поддержка свойств
• CodePen — онлайн-редактор
• CSS-Tricks — статьи и советы
• Smashing Magazine

CSS Справочник

В Schoolsw3 вы найдёте полный справочник по CSS всех свойств и селекторов с синтаксисом, примерами, поддержкой браузеров и многим другим.