MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

Путь изучения

Перед тем как браться за CSS стоит разобраться в основах HTML. В этом поможет модуль Введение в HTML. После его прохождения переходите к:

Мы рекомендуем изучать HTML и CSS одновременно. HTML гораздо интереснее в сочетании с CSS и изучать эти языки не комплексно было бы ошибкой.

В данном разделе содержится информация, которая требует самой базовой ознакомленности с компьютером и веб. В статье Установка рабочего пространства подробно описано необходимое ПО и способы его установки, необходимо также будет уметь создавать и управлять файлами, в чем поможет статья Разбираемся с файлами — которая включена в полное руководство для новичка Основы веб.

Перед тем как начинать данный раздел мы рекомендуем пройти руководство Основы веб, хотя это абсолютно не обязательно; большая часть того, что вы найдете в статье об основах CSS также встречается в разделе Введение в CSS, хотя и более детально.

Модули

Этот раздел содержит модули в порядке, наиболее подходящем для работы с ними. Лучше всего начать с самого первого.

Введение в CSS
Этот раздел поможет разобраться в том как работает CSS включая селекторы и значения, писать правила и применять CSS в HTML, как устанавливать длину, цвет и другие диницы измерения CSS, наследование, box model basics и отладка CSS.
Дизайн текста
Здесь мы рассмотрим основы стилизации текста, в том числе изменение шрифта, boldness, italics, line, letter spacing, drop shadows и другие особенности текста. Мы округляем модуль глядя на применение пользовательских шрифтов на вашей странице, стиль списков и ссылки.
Дизайн блоков
Далее мы рассмотрим дизайн блоков, один из основных шагов к разметке веб-страницы. В этом модуле мы кратко рассмотрим модель блоков, а затем посмотрим на контрольный макет окна, установив padding, borders и margins, настроим цвет фона, изображение и другие особенности необычных функций, drop shadows и фильтры блоков.
CSS верстка
На данный момент мы уже смотрели на основы CSS, такие как стиль текста, и как стилизовать и манипулировать блоками находящихся внутри вашего контента. Теперь пришло время посмотреть, как разместить ваши блоки в нужном месте в отношении просмотра, и друг друга. Мы рассмотрели необходимые предпосылки, так что теперь можно погрузиться в верстку, глядя на различные параметры отображения, традиционные методы верстки с участием float и positioning, и новые модные инструменты верстки на основе flexbox.
Адаптивный дизайн (TBD)
В настоящее время с некоторыми различными типами устройств, способных осуществлять веб-браузер, адаптивный веб-дизайн (RWD) стал основным навыком веб-разработки. В этом модуле рассказывается об основных принципах и инструментах RWD, объясняется, как применять различные CSS к документу в зависимости от таких функций устройства, как ширина экрана, ориентация и разрешение, а также изучить технологии, доступные для обслуживания различных видео и изображений в зависимости от таких функций.
Анимация и преобразование (TBD)
Два из наиболее интересных областей CSS является способность манипулировать элементами (например перемещение, вращение и угловое смещение), и плавно анимированные элементы (например из одного цвета или положения в другое.) Этот модуль исследует, как реализовать так называемые преобразования и анимации.

Решаем часто встречающиеся проблемы  в CSS

Используйте CSS, для решения общих проблем, даны ссылки на разделы содержащие, объясние как использовать CSS для решения самых распространенных проблем при создании веб-страницы: Styling boxes

Смотрите также

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

Метки документа и участники

 Внесли вклад в эту страницу: Shychara, kolanski, VladdOs, BychekRU, uleming, Andrew_Pfeiffer
 Обновлялась последний раз: Shychara,