optomall24.ru
CSS

Урок CSS для начинающих: подключение стилей и базовый синтаксис

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

В этом уроке разберём, как подключать стили к сайту, как устроен базовый синтаксис CSS, как писать первые правила без ошибок и как проверять, что стили действительно работают. Материал подойдёт тем, кто только начинает разбираться в веб-разработке и хочет понять логику, а не просто скопировать код. Я постараюсь объяснить всё на примерах, с которыми сам сталкивался при запуске первых сайтов для малого бизнеса.

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

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

Без CSS сайт обычно выглядит как простой текстовый документ: заголовки, абзацы, ссылки и картинки идут друг за другом в стандартном оформлении браузера. С CSS можно:

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

Если говорить совсем просто: HTML — это каркас, CSS — внешняя отделка. И как в ремонте, от качества отделки зависит, захочется ли пользователю остаться на странице.

Как подключить стили к HTML

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

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

Это самый правильный и удобный способ для большинства сайтов. Стили пишут в отдельном файле, например style.css, а затем подключают к HTML-документу. Такой подход позволяет один раз описать оформление и применять его ко всем страницам — не нужно дублировать код.

Пример подключения в <head>:

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

Почему это удобно

  • стили хранятся отдельно от HTML;
  • код проще поддерживать;
  • один CSS-файл можно подключить к нескольким страницам;
  • проще искать ошибки и редактировать оформление.

Из практики: когда заказчик просит «подвинуть кнопку на 5 пикселей», я открываю style.css, правлю одно свойство — и изменение применяется везде. Если бы стили были разбросаны внутри HTML-тегов, пришлось бы править каждый файл вручную.

2. Встроенные стили в тег

Иногда стиль пишут прямо внутри HTML-элемента через атрибут style.

<p style="color: red;">Красный текст</p>

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

3. Внутренние стили внутри <style>

Можно прописать CSS прямо в HTML-документе внутри тега <style>.

<style>
  p {
    color: blue;
  }
</style>

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

Базовый синтаксис CSS

CSS строится по простой схеме: выбираем элемент и говорим, что у него изменить. Никакой магии — просто чёткая структура.

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

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

  • Селектор — указывает, к какому элементу применить стиль.
  • Свойство — что именно менять.
  • Значение — на что менять.

Пример

h1 {
  color: green;
  font-size: 32px;
}

Здесь браузер понимает: все заголовки первого уровня h1 должны быть зелёными и размером 32 пикселя. Это правило я часто использую, когда нужно быстро привести заголовки к единому стилю на всём сайте.

Как читать CSS-правило

Возьмём пример:

p {
  line-height: 1.6;
  color: #333;
}

Это означает:

  • все абзацы p;
  • будут иметь межстрочный интервал 1.6;
  • и тёмно-серый цвет текста.

Важные символы

  • Фигурные скобки { } — внутри них находятся стили.
  • Двоеточие : — отделяет свойство от значения.
  • Точка с запятой ; — завершает каждую строку со свойством.
  • Селектор — пишется перед скобками.

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

Первый CSS-файл: практический пример

Допустим, у вас есть такая HTML-страница:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Добро пожаловать</h1>
  <p>Это пример страницы.</p>
</body>
</html>

Создайте рядом файл style.css и добавьте туда:

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}
h1 {
  color: #2c3e50;
}
p {
  font-size: 18px;
}

Что изменится

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

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

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

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

Селектор Пример Что выбирает
По тегу p все абзацы на странице
По классу .button все элементы с классом button
По id #header элемент с идентификатором header
Групповой h1, h2, h3 несколько элементов сразу

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

a {
  color: blue;
}

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

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

.card {
  border: 1px solid #ddd;
}

Чтобы это сработало, в HTML нужно добавить класс:

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

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

Селектор по id

#header {
  background-color: #000;
}
<div id="header">...</div>

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

Какие свойства стоит изучить в первую очередь

Для старта не нужно заучивать сотни CSS-свойств. Достаточно освоить базу, с которой можно оформить 80% типовых блоков.

Цвет и фон

color: #333;
background-color: #fff;
  • color — цвет текста;
  • background-color — цвет фона.

Шрифт

font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
  • font-size — размер текста;
  • font-family — семейство шрифтов;
  • font-weight — насыщенность.

Отступы

margin: 20px;
padding: 15px;
  • margin — внешний отступ;
  • padding — внутренний отступ.

Это одна из самых важных тем в CSS. Новички часто путают эти свойства, поэтому полезно запомнить простую логику: margin отделяет элемент от соседей, padding создаёт «воздух» внутри самого блока. Представьте карточку товара: padding — это отступ от краёв карточки до текста внутри, а margin — расстояние между соседними карточками.

Границы

border: 1px solid #ccc;

Так задаётся рамка: толщина, тип линии и цвет. Часто использую для разделителей или обводки кнопок.

Размеры

width: 300px;
height: 200px;
  • width — ширина;
  • height — высота.

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

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

1. Пропущена точка с запятой

p {
  color: red
  font-size: 16px;
}

В этом примере отсутствует ; после color: red. Из-за этого браузер может проигнорировать часть правил. Совет: всегда ставьте точку с запятой, даже после последнего свойства — так меньше шансов забыть при добавлении новых строк.

2. Неправильный путь к файлу

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

Если файл называется style.css, а не styles.css, стили не подключатся. Имя должно совпадать полностью. Проверьте, нет ли опечаток и лежит ли файл в той же папке, что и HTML (или укажите правильный относительный путь).

3. Путают класс и id

.button { ... }  /* класс */
#button { ... }  /* id */

class в HTML пишется через точку в CSS, а id — через решётку. Если в HTML class="button", а в CSS написан #button, стиль не применится.

4. Пишут CSS в HTML без подключения

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

5. Ожидают, что стиль применится ко всему подряд

CSS работает только там, куда вы его указали. Если правило написано для p, оно не повлияет на h1 или div. Новички иногда удивляются: «почему заголовок не покрасился, я же написал color: red для p?». Потому что селектор должен совпадать с элементом.

Как понять, что стили подключились

Есть несколько быстрых способов проверить работу CSS. Обычно я действую по чек-листу, чтобы не тратить время на догадки.

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

  • файл style.css сохранён;
  • путь в href указан правильно;
  • <link rel="stylesheet" ...> находится в <head>;
  • синтаксис CSS без ошибок;
  • страница обновлена в браузере;
  • кэш не мешает видеть изменения.

Если стиль не работает

Попробуйте такой порядок:

  1. Проверьте имя CSS-файла.
  2. Убедитесь, что HTML и CSS лежат в нужных папках.
  3. Откройте DevTools в браузере (F12).
  4. Посмотрите, нет ли красных ошибок в консоли.
  5. Обновите страницу с полным сбросом кэша (Ctrl+F5).

Часто проблема решается на первом или втором шаге. В DevTools также можно посмотреть, подгрузился ли файл стилей: на вкладке Network должен быть статус 200 для style.css.

Как работает каскад: простое объяснение

Слово «каскад» в CSS означает, что на один и тот же элемент может действовать несколько правил одновременно. Браузер выбирает, какое из них важнее, опираясь на специфичность селекторов и порядок подключения.

Например:

p {
  color: red;
}
.text {
  color: blue;
}

Если в HTML написано:

<p class="text">Пример</p>

то цвет станет синим, потому что класс .text обычно сильнее, чем обычный селектор по тегу. Это не просто «последнее правило побеждает» — работает система весов: id > класс > тег. Если вес одинаковый, тогда применяется то, что написано позже.

Практический смысл

Это важно, когда на странице есть общие стили и более точечные настройки. Если не понимать логику каскада, можно долго искать, почему одно правило не срабатывает. Я часто вижу, как новички добавляют !important от отчаяния, хотя достаточно было повысить специфичность селектора.

Мини-практика: стилизуем простую карточку

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

HTML

<div class="card">
  <h2>Заголовок карточки</h2>
  <p>Описание товара или услуги.</p>
</div>

CSS

.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  max-width: 300px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card h2 {
  margin-top: 0;
  font-size: 20px;
}
.card p {
  line-height: 1.5;
  color: #555;
}

Что здесь важно

  • padding создаёт внутренний отступ;
  • border-radius скругляет углы;
  • box-shadow добавляет тень;
  • у заголовка убран верхний отступ;
  • у текста задана комфортная высота строки.

Этот пример показывает, как из нескольких простых свойств собрать аккуратный визуальный блок. Если добавить ещё display: flex для внутреннего контейнера, можно выстроить элементы в ряд — но это уже тема для следующего урока.

Пошагово: как начать работать с CSS с нуля

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

Шаг 1. Создайте HTML-страницу

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

Шаг 2. Создайте файл стилей

Назовите его, например, style.css. Лучше держать его в той же папке, что и HTML, чтобы не путаться с путями.

Шаг 3. Подключите CSS в <head>

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

Шаг 4. Напишите простые правила

Начните с body, h1, p, a. Задайте цвет фона, шрифт, базовые отступы. Не пытайтесь сразу стилизовать всё — сначала добейтесь, чтобы страница перестала выглядеть как стандартный браузерный вывод.

Шаг 5. Проверьте результат в браузере

Сначала смотрите на базовые вещи: цвет, шрифт, отступы. Потом переходите к более сложным элементам. Если что-то не работает, вернитесь к чек-листу из предыдущего раздела.

Шаг 6. Меняйте по одному свойству

Новички часто вносят сразу много правок и потом не понимают, что именно повлияло на результат. Лучше менять по одному параметру и наблюдать, как он работает. Например, добавили margin — посмотрели, изменили значение — снова проверили. Так вырабатывается интуиция.

Таблица: что чаще всего делают первые CSS-свойства

Свойство Зачем нужно Пример
color цвет текста color: #222;
background-color цвет фона background-color: #fff;
font-size размер текста font-size: 18px;
margin внешний отступ margin: 20px;
padding внутренний отступ padding: 16px;
border рамка border: 1px solid #ddd;
border-radius скругление углов border-radius: 8px;

Полезные советы для начинающих

  • Начинайте с простых блоков и не пытайтесь сразу сделать сложный дизайн. Лучше довести до ума одну карточку, чем разбросать стили по всей странице.
  • Используйте браузерные инструменты разработчика, чтобы видеть, какие стили применяются. Это ваш главный помощник: можно на лету менять значения и смотреть результат.
  • Сначала отрабатывайте базу: цвет, шрифт, отступы, размеры. Без этого даже Flexbox не спасёт.
  • Не дублируйте свойства без необходимости. Если для всех заголовков нужен один шрифт, задайте его один раз для h1, h2, h3, а не для каждого отдельно.
  • Держите CSS-файл в порядке: группируйте стили по блокам страницы. Например, сначала общие стили, потом шапка, потом карточки, потом подвал. Так проще ориентироваться.
  • Комментируйте сложные участки, если проект становится больше. Через месяц вы забудете, зачем был написан тот или иной хак.

Когда стоит изучать дальше

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

  • display — как элементы ведут себя в потоке;
  • position — управление позиционированием;
  • Flexbox — выравнивание и распределение элементов в строку или колонку;
  • Grid — мощная раскладка для сложных макетов;
  • адаптивная вёрстка — чтобы сайт хорошо выглядел на мобильных устройствах;
  • псевдоклассы и псевдоэлементы — например, :hover, ::before;
  • переменные CSS — для удобного управления цветами и размерами;
  • анимации и переходы — чтобы добавить интерактивности.

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

FAQ

Какой способ подключения CSS лучше всего?

Для нормальной работы сайта лучше использовать внешний файл style.css. Это самый удобный и поддерживаемый вариант. Я всегда рекомендую его, даже если сайт состоит из одной страницы — потом будет проще расширять.

Можно ли писать CSS прямо в HTML?

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

Почему стили не применяются?

Чаще всего причина в неверном пути к файлу, ошибке в синтаксисе или в том, что CSS-файл не подключён в <head>. Проверьте также, не перебивает ли ваш стиль более специфичный селектор — откройте DevTools и посмотрите, какие правила применяются к элементу.

Что важнее изучить в CSS первым делом?

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

Что такое класс в CSS?

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

Вывод

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

Если вы научитесь аккуратно работать с color, font-size, margin, padding и классами, уже сможете оформлять реальные страницы, а не только повторять учебные примеры. Помните: хороший CSS — это не про «красиво», а про понятную структуру и удобство поддержки. Начните с малого, и через пару недель вы удивитесь, как много можете сделать.