Первые шаги в CSS: селекторы, цвета и отступы

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

Когда я только начинал верстать, мне казалось, что главное — правильно написать HTML. Но первые же заказчики показали: без стилей сайт не воспринимается всерьёз. Сейчас я объясняю клиентам, что CSS — это не просто «красивости», а инструмент, который напрямую влияет на удобство и доверие пользователя. Освоить базу CSS не сложнее, чем разобраться с форматированием текста в редакторе. Нужно лишь понять три вещи: как выбрать элемент, как задать цвет и как управлять расстояниями. Дальше — практика.

Что такое CSS и зачем он нужен

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

Без CSS даже хороший HTML выглядит как неотформатированный документ: всё прижато к левому краю, шрифты стандартные, расстояния минимальны. С CSS сайт начинает дышать, появляется иерархия: заголовок заметнее текста, кнопка выделяется на фоне, блоки не слипаются. На практике это означает, что пользователь быстрее находит нужное и не уходит с сайта из-за визуального хаоса.

Типичный пример из моей практики: приходит заказчик с самодельным сайтом на чистом HTML, где всё «работает», но выглядит ужасно. Первые полчаса я подключаю базовый CSS — задаю шрифты, отступы, цвета — и страница преображается. Клиент часто удивляется: «И это всё?». Да, базовая аккуратность решает 80% задач.

Из чего состоит CSS-правило

Любое правило CSS строится по одной и той же схеме, и её стоит запомнить сразу:

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

Пример из реальной вёрстки:

p {
  color: #333;
}

Здесь:

• p — селектор, он говорит браузеру: «примени стиль ко всем абзацам»;
• color — свойство, отвечающее за цвет текста;
• #333 — значение, тёмно-серый оттенок.

Проще говоря, CSS-правило — это инструкция вида «выбери вот эти элементы и сделай с ними вот это». Когда вы поймёте эту логику, любой новый стиль будете читать как открытую книгу.

Селекторы: как выбрать нужный элемент

Селектор — это та часть CSS, которая указывает, к какому именно HTML-элементу применить стили. Именно с селекторов начинается любое знакомство с CSS, и здесь важно не перегружать себя сразу всеми возможностями. Для старта хватит четырёх-пяти типов, которые закрывают 95% реальных задач.

Самые полезные селекторы для новичка

Селектор по тегу

Самый простой вариант — обратиться к элементу по имени HTML-тега. Например, так можно задать цвет всем заголовкам первого уровня:

h1 {
  color: #2c3e50;
}

На практике селекторы по тегам я чаще всего использую для базовых сбросов стилей: убрать стандартные отступы у списков, задать единый шрифт для body. Для точечного оформления они неудобны, потому что затрагивают все элементы одного типа на странице.

Селектор по классу

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

HTML:

<div class="card">...</div>
<div class="card">...</div>

CSS:

.card {
  background: #f9f9f9;
  padding: 20px;
  margin-bottom: 16px;
}

Класс в CSS пишется через точку. За годы работы я пришёл к тому, что 90% моих стилей — это классы. Они предсказуемы, легко читаются и не зависят от структуры HTML.

Селектор по id

Id используется для уникального элемента на странице — например, шапки сайта или основного меню.

HTML:

<header id="main-header">...</header>

CSS:

#main-header {
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

Id пишется через #. Важный момент: на одной странице не может быть двух элементов с одинаковым id. Если вам нужно оформить несколько однотипных блоков, всегда выбирайте класс. Id я оставляю для якорей навигации и совсем уникальных контейнеров.

Группировка селекторов

Когда один и тот же стиль нужен нескольким элементам, их можно перечислить через запятую. Это экономит код и упрощает поддержку:

h1, h2, h3 {
  font-family: 'Segoe UI', sans-serif;
  color: #222;
}

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

Практическое правило выбора селектора

Из своего опыта советую такую логику:

• тег — для глобальных сбросов и базовых настроек (например, body, ul);
• класс — для повторяющихся компонентов: карточек, кнопок, секций;
• id — для уникальных блоков, которые точно не повторятся;
• группировка — когда несколько тегов должны выглядеть одинаково.

Если сомневаетесь — используйте класс. Ошибиться с ним сложнее, а переиспользовать проще.

Как работают цвета в CSS

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

Основные способы задать цвет

В CSS есть несколько форматов записи цвета. Чаще всего используются:

• название цвета;
• HEX;
• RGB;
• RGBA;
• HSL.

Названия цветов

Самый простой способ — написать название цвета по-английски:

color: red;
background-color: lightblue;

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

HEX-цвета

HEX — самый распространённый формат в вёрстке. Он компактный и точный:

color: #333333;
background: #f8f8f8;

HEX-цвет начинается с # и содержит шесть символов (цифры и буквы от A до F). Часто используют сокращённую запись, если символы в парах повторяются:

color: #333; /* то же, что #333333 */
background: #fff; /* белый */

Для новичка HEX — идеальный старт. Его легко скопировать из любого графического редактора, и он поддерживается везде.

RGB и RGBA

Формат RGB задаёт цвет через три канала: красный, зелёный и синий. Значения каждого канала — от 0 до 255:

color: rgb(51, 51, 51);

RGBA — это RGB плюс альфа-канал, который отвечает за прозрачность. Четвёртое число задаётся от 0 (полностью прозрачный) до 1 (полностью непрозрачный):

background: rgba(0, 0, 0, 0.5); /* полупрозрачный чёрный */

RGBA незаменим, когда нужно сделать затемняющую подложку для модального окна или легкую тень, не перекрывающую контент полностью.

Когда какой формат удобнее

Базовые советы по работе с цветом

• Не используйте больше двух-трёх ярких акцентных цветов на одной странице — это расфокусирует внимание.
• Всегда проверяйте контраст текста и фона. Серый на белом может выглядеть стильно, но читать такой текст — мучение.
• Для основного текста я рекомендую тёмно-серый (#333 или #444), а не чистый чёрный (#000). Чёрный на белом даёт слишком резкий контраст, от которого устают глаза.
• Цвета должны поддерживать визуальную иерархию: заголовок заметнее обычного текста, кнопка заметнее фона, ссылка выделяется среди остального текста.

Типичная ошибка новичка

Самая частая проблема — недостаточный контраст. Например, светло-серый текст на белом фоне выглядит «аккуратно», но читать его тяжело. Если пользователь щурится или напрягается, оформление работает против сайта. В своих проектах я всегда проверяю контрастность с помощью инструментов вроде WebAIM Contrast Checker — это занимает минуту, но спасает от претензий заказчика.

Отступы: почему они важнее, чем кажется

Отступы делают страницу «дышащей». Без них даже хороший контент превращается в плотную стену текста, где глазу не за что зацепиться. В CSS за расстояния отвечают два основных свойства: margin (внешний отступ) и padding (внутренний отступ).

Разница между margin и padding

Представьте карточку товара в интернет-магазине. У неё есть граница, внутри которой лежит изображение и описание. Так вот:

• margin — это расстояние от границы карточки до соседних элементов (других карточек, краёв экрана);
• padding — это пространство внутри карточки, между её границей и содержимым (чтобы текст не прилипал к краям).

Пример кода:

.product-card {
  margin-bottom: 20px; /* отступ снизу до следующей карточки */
  padding: 16px;       /* воздух внутри карточки */
}

Когда использовать margin

margin нужен, чтобы раздвинуть элементы друг от друга. Типичные сценарии:

• расстояние между абзацами;
• промежуток между карточками товаров в сетке;
• отступ между заголовком и следующим за ним текстом;
• отступ секции от соседних блоков.

На практике я часто задаю margin-bottom для повторяющихся компонентов, чтобы не ломать поток документа.

Когда использовать padding

padding добавляет воздух внутри блока, чтобы контент не прилипал к границам. Примеры:

• кнопка с нормальной «кликабельной» зоной — текст не упирается в края;
• карточка с фоном, где текст отступает от рамки;
• блок с текстом, который не должен касаться краёв контейнера.

Хороший тон — всегда давать тексту немного внутреннего пространства. Это мгновенно повышает визуальное качество страницы.

Базовые свойства отступов

Короткая запись отступов

Чтобы не писать четыре отдельных свойства, можно использовать сокращённую запись. Одно значение — отступ со всех сторон:

margin: 20px;

Два значения: первое — сверху и снизу, второе — слева и справа:

margin: 10px 20px;

Четыре значения: по часовой стрелке — сверху, справа, снизу, слева:

margin: 10px 15px 20px 15px;

Такой порядок легко запомнить: начинаем с верха и идём по кругу. В своих проектах я чаще всего использую запись с одним или двумя значениями — этого хватает для большинства ситуаций.

Типовая ошибка с отступами

Новички нередко пытаются создавать расстояния пробелами, пустыми абзацами или дополнительными <br>. Это плохая практика: на разных экранах такие «отступы» ведут себя непредсказуемо, ломают семантику и усложняют поддержку. В CSS для этого есть margin и padding — только они должны управлять расстояниями. Если вы ловите себя на мысли «вставлю-ка я ещё одну пустую строку», остановитесь и добавьте отступ в стилях.

Как связать CSS с HTML

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

1. Внешний файл CSS

Самый правильный и удобный способ. Стили хранятся в отдельном файле (например, style.css), а в HTML подключаются через тег <link> внутри <head>:

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

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

2. Внутренние стили

Стили пишутся прямо в HTML-документе внутри тега <style>:

<style>
  body {
    font-family: Arial, sans-serif;
  }
</style>

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

3. Стиль прямо в теге

Самый неудобный способ — атрибут style непосредственно в HTML-элементе:

<p style="color: red; margin-bottom: 10px;">Текст</p>

Такой код быстро превращается в хаос. Я использую инлайновые стили только в крайних случаях, когда нужно динамически задать значение из JavaScript, и то стараюсь минимизировать. Для обычной вёрстки этот метод лучше забыть сразу.

Мини-практика: оформляем простой блок

Давайте соберём всё вместе на примере карточки с заголовком и описанием — такие блоки встречаются в любом сайте: отзывы, услуги, товары.

HTML:

<div class="info-card">
  <h2>Доставка</h2>
  <p>Бесплатно при заказе от 3000 рублей.</p>
</div>

CSS:

.info-card {
  background: #f5f7fa;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 8px;
}

.info-card h2 {
  color: #2c3e50;
  margin-bottom: 8px;
}

.info-card p {
  color: #555;
  margin: 0;
}

Что здесь происходит:

• блоку задаётся светлый фон и скруглённые углы — карточка визуально отделяется от остального контента;
• внутренний отступ padding: 24px даёт воздух тексту, чтобы он не прилипал к краям;
• внешний отступ снизу margin-bottom: 20px отделяет карточку от следующего элемента;
• заголовок и текст получают читаемые цвета, причём заголовок темнее и заметнее;
• у абзаца убирается стандартный внешний отступ (margin: 0), чтобы не было двойных отступов.

Это уже не черновик, а вполне рабочий компонент. Добавив несколько таких карточек, вы получите аккуратный блок с информацией, который не стыдно показать заказчику.

Как проверять себя в процессе

Когда осваиваете CSS, важно смотреть на результат не только с точки зрения «работает или нет», но и с позиции пользователя. Я всегда держу в уме простой чек-лист, который помогает избежать типичных промахов.

Чек-лист проверки

• Текст хорошо читается? Не сливается ли с фоном?
• Достаточен ли контраст между фоном и текстом? (особенно для светлых оттенков серого)
• Не слипаются ли блоки? Есть ли между ними визуальные паузы?
• Не слишком ли большие отступы? Иногда щедрые padding’и съедают полезное пространство.
• Не выглядит ли страница пустой? Может, стоит уменьшить расстояния или добавить разделители?
• Нет ли хаоса из разных цветов и размеров шрифтов? Всё должно подчиняться единой логике.

Как понять, что вы переборщили

Обычно ошибка видна сразу:

• слишком много ярких цветов — страница рябит;
• блоки прыгают по странице из-за несогласованных отступов;
• между элементами нет логики: где-то густо, где-то пусто;
• кнопки и текст выглядят как набор случайных стилей, а не как единая система.

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

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

За годы работы я видел одни и те же грабли, на которые наступают почти все начинающие верстальщики. Вот основные, чтобы вы могли их обойти.

1. Слишком специфичные селекторы

Новички любят писать длинные цепочки вроде:

body div.content ul li a { ... }

Иногда это работает, но делает код хрупким. Чуть изменится вложенность в HTML — и стиль перестаёт применяться. Гораздо надёжнее использовать короткие классы: .nav-link вместо header nav ul li a.

2. Путаница между margin и padding

Если блок «не отодвигается» от соседа, проверьте, что вы добавили именно внешний отступ, а не внутренний. И наоборот: если текст прилипает к краям, нужен padding. Это одна из самых частых ошибок в начале, и я сам когда-то тратил на неё кучу времени.

3. Случайные цвета без системы

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

4. Отступы через пробелы

Пустые строки, множественные <br> или символы неразрывного пробела не заменяют margin и padding. Такие «костыли» ломаются при изменении размера экрана и делают код нечитаемым.

5. Игнорирование стандартных стилей браузера

У каждого браузера есть встроенные отступы у body, списков, заголовков и абзацев. Иногда кажется, что CSS «не работает», а на самом деле мешают эти стандартные стили. Я всегда начинаю новый проект с минимального сброса:

body {
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

Это убирает сюрпризы и даёт чистый холст для вёрстки.

Что стоит выучить дальше

После того как селекторы, цвета и отступы перестали вызывать вопросы, можно двигаться дальше по такой схеме:

1. Разобраться с шрифтами и типографикой — подключение веб-шрифтов, управление размером, межстрочным интервалом.
2. Понять блочную модель глубже: как работает box-sizing, почему ширина блока складывается из нескольких компонентов.
3. Освоить свойство display — block, inline, inline-block, none.
4. Изучить flex — это основной инструмент для построения сеток и выравнивания элементов сегодня.
5. Перейти к адаптивности и медиа-запросам, чтобы сайт хорошо выглядел на мобильных устройствах.

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

Вывод

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

Если запомнить только главное, то это будет так:

• селектор отвечает за выбор элемента — используйте классы для повторяющихся компонентов;
• цвет задаёт визуальную иерархию и читаемость — держите под рукой HEX и проверяйте контраст;
• отступы делают макет аккуратным и удобным — margin для внешних расстояний, padding для внутренних.

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

FAQ

Что важнее изучать первым: селекторы или отступы?

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

Чем класс отличается от id?

Класс можно использовать для многих элементов на странице, а id должен быть уникальным. Для большинства задач в CSS удобнее и безопаснее классы: их можно переиспользовать, и они не создают проблем со специфичностью. Id пригодится для якорей навигации или совсем уникальных блоков, но не для массового оформления.

Почему margin и padding постоянно путают?

Потому что оба отвечают за расстояние. Разница в том, что margin работает снаружи блока — отодвигает его от соседей, а padding — внутри, увеличивая расстояние от границы до содержимого. Простая аналогия: margin — это расстояние между коробками на полке, padding — прокладка внутри коробки, чтобы товар не бился о стенки.

Какой формат цвета лучше использовать новичку?

Для старта проще всего использовать HEX. Он компактный, понятный и широко применяется в реальных проектах. Скопировали код из палитры — и вставили в CSS. Позже, когда понадобится прозрачность, освоите RGBA.

Нужно ли сразу учить все селекторы?

Нет. Для начала достаточно селекторов по тегам, классам, id и группировки. Этого хватит для 95% задач. Остальные варианты (вложенность, псевдоклассы, атрибуты) можно осваивать постепенно, когда появится реальная потребность.