CSS с нуля: как оформить страницу сайта

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

В этом материале я покажу базу, которую сам использую каждый день. Без воды и академических отступлений — только то, что реально нужно для первых макетов: как подключать стили, как выбирать элементы, что такое box model, как работают каскад и наследование, и как собирать простые, но правильные страницы.

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

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

С его помощью можно:

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

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

Как подключить CSS к странице

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

Способ	Где используется	Плюсы	Минусы
Внешний файл	Чаще всего в реальных проектах	Удобно поддерживать, стили переиспользуются	Нужно подключать файл отдельно
Внутренний стиль	На одной странице	Быстро для тестов	Плохо масштабируется
Inline-стиль	Прямо в HTML-атрибуте	Подходит для точечных правок	Трудно сопровождать

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

Это лучший вариант для большинства задач. Создаёте файл, например style.css, и подключаете его в <head>:

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

2. Внутри тега `<style>`

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

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

3. Inline-стили

Используются редко, обычно для быстрой проверки гипотезы прямо в браузере. В production-коде их лучше избегать — они перегружают HTML и мешают переиспользованию.

<p style="color: red;">Текст</p>

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

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

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

Основные селекторы

p — выбирает все абзацы;
.card — выбирает элементы с классом card;
#header — выбирает элемент с конкретным id;
* — выбирает всё на странице.

Примеры:

/* По тегу */
p {
  color: #333;
}

/* По классу */
.card {
  background: #fff;
  border-radius: 8px;
}

/* По id */
#header {
  position: sticky;
  top: 0;
}

Что важно понимать новичку

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

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

Базовые свойства CSS, которые нужны сразу

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

Текст

p {
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #222;
}

Что это даёт:

font-family — шрифт;
font-size — размер текста;
line-height — расстояние между строками;
color — цвет текста.

Фон и рамки

.box {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
}

Размеры

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

Отступы

.section {
  padding: 40px 20px;
  margin-bottom: 30px;
}

Эти свойства — основа любой страницы. Если они настроены плохо, даже хороший дизайн будет выглядеть неряшливо. Отступы — это то, на чём спотыкаются чаще всего: то слишком плотно, то разъезжается. Я советую использовать относительные единицы (em, rem, %) для адаптивности, но на старте можно и в px для понимания.

Box model: из чего состоит любой элемент

Одна из главных тем в CSS — box model, или блочная модель. По сути, каждый элемент на странице — это прямоугольник, у которого есть несколько слоёв. В моей практике был случай, когда заказчик попросил увеличить внутренний отступ в карточке товара, и после этого карточки перестали помещаться в ряд. Оказалось, что ширина была фиксированной, а padding добавился сверху. После установки box-sizing: border-box всё встало на места.

Слои box model

содержимое (content);
внутренний отступ (padding);
рамка (border);
внешний отступ (margin).

На практике это выглядит так:

.element {
  width: 300px;
  padding: 20px;
  border: 2px solid #ccc;
  margin: 10px;
}

Почему это важно

Новички часто удивляются, почему блок шириной 300px не помещается в ожидаемый размер. Причина обычно в том, что к ширине добавляются padding и border. Если не понимать box model, очень легко сломать макет.

Полезная настройка

Во многих проектах используют:

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

Каскад, наследование и приоритеты

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

Что влияет на итоговый стиль

специфичность селектора;
порядок объявления;
наследование от родительских элементов;
!important как крайний случай.

Простой пример

p {
  color: blue;
}

.article p {
  color: green;
}

Если абзац находится внутри .article, он станет зелёным, потому что селектор точнее.

Наследование

Некоторые свойства передаются от родителя к потомкам автоматически. Например:

color;
font-family;
line-height.

А вот margin и padding не наследуются.

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

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

Как строить простую страницу на CSS

Ниже — рабочая логика, с которой удобно начинать любую вёрстку. Этот план я даю своим ученикам как каркас для первого макета. Сначала сброс отступов и box-sizing, потом контейнер для центрирования, затем секции с отступами, карточки и кнопки. С этого начинаются 90% коммерческих сайтов, которые я делал.

Шаг 1. Задайте базовые стили для страницы

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: #333;
  background: #fff;
}

Шаг 2. Ограничьте ширину контента

.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

Шаг 3. Оформите секции

.section {
  padding: 60px 0;
}

Шаг 4. Сделайте карточку

.card {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

Шаг 5. Настройте кнопки

.btn {
  display: inline-block;
  padding: 12px 24px;
  background: #007bff;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}

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

Flexbox: как быстро выстроить элементы в ряд

Когда нужно расположить блоки в строку, распределить пространство или выровнять элементы по центру, обычно используют Flexbox. Это один из самых удобных способов сделать современную раскладку. Flexbox — мой основной инструмент для выравнивания. Даже для простого центрирования попапа я использую display: flex на body.

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

меню навигации;
ряд карточек;
шапку сайта;
кнопки и иконки в одной линии;
выравнивание по центру.

Базовый пример

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

display: flex превращает контейнер во flex-контейнер;
justify-content управляет распределением по главной оси;
align-items выравнивает элементы по поперечной оси.

Практический пример для карточек

.cards {
  display: flex;
  gap: 20px;
}

.card {
  flex: 1;
}

Если карточек много, можно добавить перенос:

.cards {
  flex-wrap: wrap;
}

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

Частые ошибки новичков в CSS

1. Слишком много фиксированных размеров

Если везде ставить жёсткую ширину, страница плохо адаптируется. Часто вижу, как новички ставят width: 100% на блочный элемент, который и так растягивается на всю ширину, а потом удивляются, почему появляется горизонтальная прокрутка из-за лишних отступов.

Плохо:

.block {
  width: 400px;
}

Лучше:

.block {
  max-width: 400px;
  width: 100%;
}

2. Игнорирование отступов

Без нормальных margin и padding даже хороший дизайн выглядит тесным. Особенно это заметно на мобильных, где контент прилипает к краям экрана.

3. Стилизация по тегам везде подряд

Если написать слишком много правил вроде h1, p, ul, потом будет трудно переиспользовать компоненты. Лучше использовать классы для блоков. Например, вместо h1 { ... } лучше задать класс .page-title, чтобы стили применялись только к нужному заголовку.

4. Споры с браузером вместо настройки box model

Когда ширина «не сходится», первым делом проверьте box-sizing, padding, border и внешние отступы. Часто проблема решается добавлением box-sizing: border-box на все элементы.

5. `!important` без необходимости

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

Мини-чек-лист: что проверить перед запуском страницы

подключён ли CSS-файл;
нет ли лишних отступов у body;
задан ли box-sizing: border-box;
читается ли текст на фоне;
не ломается ли макет на узком экране;
одинаково ли выглядят повторяющиеся блоки;
не слишком ли много фиксированных ширин;
хватает ли отступов между секциями.

Перед сдачей проекта я всегда прохожу по этому списку. Особенно проверяю, не забыл ли я указать box-sizing, и как выглядит страница на мобильном. Часто заказчики смотрят сайт с телефона, и если там всё съехало — это провал.

Пошаговый план, если вы только начали учить CSS

1. Освойте базовые селекторы

Начните с тегов, классов и id. Этого хватит для первых страниц.

2. Разберитесь с box model

Поймите, как работают margin, padding, border и width. Поэкспериментируйте в DevTools браузера, меняя значения и наблюдая за изменениями.

3. Научитесь задавать типографику

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

4. Соберите 3–4 типовых блока

Сделайте шапку, карточку, кнопку и секцию с контентом. Это стандартные кирпичики любого макета.

5. Переходите к Flexbox

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

6. Проверьте адаптивность

Сузьте экран и посмотрите, как ведут себя блоки. Где нужно, добавьте медиазапросы или замените фиксированные ширины на относительные.

FAQ

Какой CSS учить первым?

Сначала селекторы, box model, отступы, типографику и Flexbox. Это даёт базу для большинства страниц. Не пытайтесь выучить все свойства сразу — они запомнятся в процессе вёрстки реальных макетов.

Что важнее: HTML или CSS?

Они решают разные задачи. HTML строит структуру, CSS отвечает за внешний вид. Без HTML CSS не к чему применять. В реальной работе они идут рука об руку: сначала размечаете смысловую структуру, потом оформляете её.

Почему мои размеры «не совпадают»?

Чаще всего причина в padding, border и отсутствии box-sizing: border-box. Откройте инспектор в браузере и посмотрите, из чего складывается итоговая ширина элемента.

Можно ли верстать только на Flexbox?

Для простых страниц — да, часто можно. Но для более сложных сеток полезно знать и CSS Grid. Я обычно комбинирую: Flexbox для компонентов и одномерных рядов, Grid — для раскладки страницы в целом.

Нужно ли использовать `id` для стилизации?

Обычно нет. Для повторяемых и гибких стилей удобнее классы. id оставляйте для якорей навигации или JavaScript-логики, но не для CSS.

Вывод

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

Хороший старт в CSS — это не заучивание всех свойств подряд, а понимание базовой логики: как выбрать элемент, как он занимает место на странице и как его выровнять. Именно это позволяет оформить сайт так, чтобы он выглядел профессионально и нормально работал на разных экранах. Я сам когда-то начинал с этих шагов, и они до сих пор лежат в основе каждого моего проекта.