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

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

CSS (Cascading Style Sheets) — это язык описания внешнего вида HTML‑документа.
Он отвечает за:

  • цвета и шрифты;
  • отступы и размеры элементов;
  • расположение блоков на странице;
  • анимации и переходы;
  • адаптивность под разные устройства.

Без CSS HTML‑страница выглядит как текст с ссылками — CSS придаёт ей дизайн.

2. Как CSS работает с HTML

HTML задаёт структуру (что есть на странице), а CSS — стиль (как это выглядит).
Есть три способа подключить CSS к HTML:

Способ 1. Встроенный стиль (inline)

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

Минус: неудобно править, код быстро разрастается.

Способ 2. Внутренний CSS (в <style>)

<head>
			<style>
			p {
			color: blue;
			
			font-size: 14px;
			}
			</style>
			</head>

Плюс: всё в одном файле. Минус: не подходит для многостраничного сайта.

Способ 3. Внешний CSS-файл (рекомендуемый)

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

Файл styles.css: 

p {
			color: green;
			font-size: 18px;
			}

Плюс: легко править, подходит для любых проектов.

3. Основы синтаксиса CSS

Правило CSS состоит из:

  1. Селектора — указывает, к какому элементу применить стиль
    (например, p, .header, #main).
  2. Свойств — что менять (color, margin, padding).
  3. Значений — как именно менять (red, 10px, center).

Формат: 

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

Пример: 

h1 {
			color: #333;
			font-family: Arial, sans-serif;
			text-align: center;
			}

4. Основные свойства CSS (с примерами)

4.1. Текст и шрифты

  • color — цвет текста;
  • font-size — размер шрифта;
  • font-family — гарнитура шрифта;
  • text-align — выравнивание (left, center, right).

4.2. Отступы и размеры

  • margin — внешние отступы;
  • padding — внутренние отступы;
  • width / height — ширина и высота.

4.3. Фон и границы

  • background-color — цвет фона;
  • border — граница (толщина, стиль, цвет);
  • border-radius — скругление углов.

4.4. Позиционирование

  • display — блочный (block) или строчный (inline) элемент;
  • float — обтекание;
  • position — абсолютное/относительное позиционирование.

5. Пример: HTML + CSS в действии

Создадим простую карточку с заголовком, текстом и кнопкой.

HTML-разметка

<div class="card">
			<h2 class="title">Заголовок карточки</h2>
			<p class="text">Описание содержимого.</p>
			<button class="btn">Нажать</button>
			</div>

CSS-стили

.card {
			width: 300px;
			padding: 20px;
			background-color: #f5f5f5;
			border-radius: 8px;
			text-align: center;
			}
			.title {
			color: #2c3e50;
			margin-bottom: 10px;
			}
			.text {
			color: #7f8c8d;
			line-height: 1.5;
			}
			.btn {
			background-color: #3498db;
			color: white;
			border: none;
			padding: 10px 20px;
			border-radius: 4px;  cursor: pointer;

Результат: аккуратная карточка с отступами, скруглёнными углами и цветной кнопкой.

6. Как начать изучать CSS

  1. Создайте простой HTML‑файл и попробуйте добавить стили через <style> в <head>.
  2. Изучите основные селекторы:

    • p — все абзацы;
    • .classname — элементы с классом classname;
    • `#idname` — элемент с id `idname`.
  3. Пробуйте менять цвета (`color`, `background‑color`), шрифты (`font‑family`, `font‑size`) и отступы (`margin`, `padding`).
  4. Используйте онлайн‑песочницы (CodePen, JSFiddle) для быстрых экспериментов.

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

  • Забыли точку с запятой в конце свойства → стиль не применяется.

    p { color: red } /* Ошибка! Нет ";" */
  • Не закрыли фигурные скобки → ломаются последующие правила.
  • Путают классы и id: класс можно применять к нескольким элементам, id — только к одному.
  • Не проверяют кросс‑браузерность в Safari/Edge стили могут отображаться иначе.
  • Перегружают код старайтесь писать лаконично, используйте наследование.

CSS — это «одежда» для HTML. Он превращает скучный текст в стильный, удобный сайт.
Начните с малого:

  1. Освойте базовые свойства (цвет, шрифты, отступы).
  2. Научитесь подключать CSS к HTML.
  3. Практикуйтесь на простых примерах.
  4. Изучайте документацию и примеры.

Чем больше вы пишете CSS, тем лучше понимаете его логику. Удачи в изучении!