← назад к разделу

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

Правило: селектор, свойство, значение

Весь CSS состоит из правил одинаковой формы:

селектор {
  свойство: значение;
  свойство: значение;
}

.card-title {
  color: #1a1a2e;
  font-size: 20px;
}

Селектор говорит, к каким элементам применить (здесь — ко всем с классом card-title); объявления внутри скобок — что именно поменять. Двоеточие между свойством и значением, точка с запятой после каждого объявления — забытая точка с запятой молча ломает и текущее объявление, и следующее: браузер не сообщает об ошибках CSS, он просто пропускает непонятное. Комментарии — только /* так */ (никаких //).

Три способа подключить — и один правильный

<!-- 1. Инлайн: атрибут style. Годится для проб, в коде — запах -->
<p style="color: red">Текст</p>

<!-- 2. Тег <style> в <head>: стили одной страницы -->
<style> p { color: red; } </style>

<!-- 3. Внешний файл — стандарт -->
<link rel="stylesheet" href="styles.css">

Рабочий вариант — внешний файл: один набор стилей на все страницы, кэшируется браузером, отделён от разметки. Инлайн-стили ещё и побеждают почти всё в каскаде — чинить вёрстку с ними мучительно. В React-проектах подключение выглядит иначе (импорты, CSS Modules), но под капотом это те же внешние стили.

Классы — рабочий инструмент

Стилизовать можно по тегу (p { }), но так вы красите все абзацы сайта. Повседневный инструмент — класс: имя, которое вы вешаете на элемент сами:

<button class="btn btn-primary">Сохранить</button>

.btn { padding: 8px 16px; border-radius: 6px; }
.btn-primary { background: #2f5b4f; color: white; }

У элемента может быть несколько классов — стили складываются: .btn задаёт форму всех кнопок, .btn-primary — цвет главной. Этот приём — база компонентного мышления: общее в один класс, вариации в дополнительные. Именуйте классы по смыслу, не по виду: .error-message, а не .red-text — завтра ошибки станут оранжевыми, и класс превратится в ложь.

Минимальный набор свойств

Текст и цвет — то, что настраивают в первую очередь:

body {
  font-family: Inter, Arial, sans-serif; /* список с запасными: нет первого — берём следующий */
  font-size: 16px;
  line-height: 1.5;    /* межстрочный интервал; без единиц = множитель от шрифта */
  color: #1a1a2e;      /* цвет текста */
}
h1 { font-weight: 700; }         /* насыщенность: 400 обычный, 700 жирный */
.muted { color: rgb(100 100 100 / 0.7); } /* с прозрачностью */
.link { text-decoration: none; } /* убрать подчёркивание */

Цвета записывают hex-кодом (#1a1a2e, короткая форма #fff), функциями rgb() / hsl() (последняя удобна для «чуть светлее/темнее») или ключевыми словами. Фон элемента — background-color, а про размеры, отступы и рамки подробно расскажет статья о блочной модели — не будем забегать.

DevTools: посмотреть, что применилось

Главный инструмент изучения CSS встроен в браузер: правый клик → «Просмотреть код» (Inspect). Панель Styles показывает для выбранного элемента все претендовавшие правила: применившиеся, перечёркнутые проигравшие и откуда каждое пришло (файл и строка). Значения можно править прямо там и мгновенно видеть результат — это песочница для экспериментов, ничего не сломаете: обновление страницы всё вернёт.

Привычка смотреть в DevTools, почему элемент выглядит именно так, ускоряет обучение сильнее любых статей — а перечёркнутые строки в панели Styles станут понятны после следующей статьи цикла.

Коротко

  • CSS-правило: селектор + объявления «свойство: значение». Браузер молча пропускает ошибки — потерянная точка с запятой ломает тихо.
  • Подключение — внешним файлом через <link>; инлайн-стили для проб, в коде — запах.
  • Класс — основной селектор; классов может быть несколько, стили складываются. Имена — по смыслу, не по виду.
  • Стартовый набор: font-family со списком запасных, font-size, line-height, color, background-color; цвета — hex/rgb/hsl.
  • DevTools → Styles: какие правила применились, какие проиграли и откуда пришли. Править вживую — лучший способ учиться.

Что почитать дальше

  • Каскад, специфичность и наследование — почему в DevTools часть правил перечёркнута.
  • Селекторы — прицеливаться точнее, чем «все элементы с классом».
  • Блочная модель — размеры, отступы и рамки: следующий пласт свойств.