CSS с нуля: как одеть HTML-скелет и сделать страницу красивой

В прошлой статье мы собрали HTML-страницу «О себе». Помните, как она выглядела? Черный текст на белом фоне, всё в один столбик, шрифт Times New Roman, ссылка — синяя с подчеркиванием из 90-х. Скелет есть, но на человека он пока не похож.

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

Что такое CSS и как он подключается

CSS (Cascading Style Sheets) — это язык описания внешнего вида. Если HTML говорит браузеру «здесь заголовок, здесь абзац», то CSS говорит «заголовок — крупный и темно-синий, абзац — с отступом и серым цветом, всё содержимое — по центру экрана шириной 700 пикселей».

Есть три способа подключить CSS. Мы разберем правильный — отдельный файл.

Шаг 1: создайте файл style.css

В той же папке, где лежит index.html, создайте новый файл style.css.

Шаг 2: подключите его в <head>

Добавьте внутрь тега <head> вашего HTML-файла одну строку:

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

Теперь ваш index.html выглядит так:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Обо мне — Иван Петров</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- ... ваш контент ... -->
</body>
</html>

💡 Почему отдельный файл? Один CSS-файл можно подключить к сотне HTML-страниц. Меняете цвет кнопки в одном месте — он меняется на всем сайте. Это и есть смысл CSS.

Синтаксис: как писать правила

Любое CSS-правило состоит из трех частей:

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

• Селектор — кого стилизуем (body, h1, p, класс).

• Свойство — что меняем (color, font-size, margin).

• Значение — на что меняем (#333, 24px, 20px).

Пример: «все абзацы — серые и с отступом снизу»:

p {
    color: #555;
    margin-bottom: 16px;
}

Селекторы: три главных типа

1. По тегу — стилизует все элементы этого типа

h1 {
    color: #1a1a2e;
}

Все <h1> на странице станут темно-синими.

2. По классу — стилизует элементы с атрибутом class

В HTML добавляете класс:

<p class="intro">Это вводный абзац.</p>

В CSS обращаетесь к нему через точку:

.intro {
    font-size: 20px;
    font-weight: bold;
}

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

3. По id — стилизует один уникальный элемент

В HTML:

<h1 id="main-title">Привет, я Иван</h1>

В CSS — через решетку:

#main-title {
    text-align: center;
}

id должен быть один на странице. Для стилей почти всегда используют классы, а id — для якорей и JavaScript.

Базовые свойства: минимум для красивой страницы

Цвет текста и фона

body {
    background-color: #f4f4f8;
    color: #333333;
}

Цвета задаются:

• HEX-кодом: #333, #1a1a2e (гуглите «color picker» — там подберете нужный).

• Названием: red, white, navy — но их всего 140, HEX надежнее.

Шрифты

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

• font-family — список шрифтов через запятую. Браузер берет первый доступный. sans-serif в конце — запасной вариант без засечек.

• font-size: 16px — базовый размер текста. Меняете здесь — меняется везде.

• line-height: 1.6 — межстрочный интервал. 1.6 значит «в 1.6 раза больше размера шрифта». Секрет читаемости.

Отступы: margin и padding

Это самая частая путаница у новичков. Запомните раз и навсегда:

• margin — отступ снаружи элемента (расстояние до соседей).

• padding — отступ внутри элемента (расстояние от границы до содержимого).

h1 {
    margin-bottom: 20px;
}

p {
    padding: 10px;
}

Можно задавать со всех сторон сразу:

/* сверху справа снизу слева — по часовой стрелке */
margin: 10px 20px 10px 20px;

/* вертикально горизонтально */
margin: 10px 20px;

Границы и скругления

img {
    border-radius: 12px;
    border: 3px solid #ddd;
}

border-radius скругляет углы. border рисует рамку: толщина, стиль, цвет.

Собираем всё вместе: преображаем страницу «О себе»

Откройте style.css и вставьте этот код целиком:

/* ===== Базовые настройки ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #333333;
    background-color: #f4f4f8;
    padding: 40px 20px;
}

/* ===== Контейнер: центрируем контент ===== */
.container {
    max-width: 700px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ===== Заголовки ===== */
h1 {
    font-size: 36px;
    color: #1a1a2e;
    margin-bottom: 24px;
    text-align: center;
}

h2 {
    font-size: 22px;
    color: #16213e;
    margin-top: 32px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e8e8f0;
}

/* ===== Текст ===== */
p {
    margin-bottom: 16px;
    color: #555555;
}

/* ===== Списки ===== */
ul {
    list-style: none;
    padding-left: 0;
}

li {
    padding: 8px 0 8px 28px;
    position: relative;
    color: #555555;
}

li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #4a6cf7;
    font-weight: bold;
}

/* ===== Ссылки ===== */
a {
    color: #4a6cf7;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

a:hover {
    border-bottom-color: #4a6cf7;
}

/* ===== Картинка ===== */
img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 24px auto 0;
    border-radius: 50%;
    width: 160px;
    border: 4px solid #e8e8f0;
}

И не забудьте обернуть содержимое <body> в контейнер. Ваш HTML примет вид:

<body>
    <div class="container">
        <h1>Привет, я Иван 👋</h1>
        <!-- ... остальной контент ... -->
    </div>
</body>

Что изменилось:

• Страница стала светло-серой, а контент — на белой «карточке» по центру с тенью и скругленными углами.

• Заголовки темные, второй уровень — с тонкой линией под ним.

• Пункты списка получили стрелочки вместо стандартных точек.

• Ссылка синяя и без уродливого подчеркивания, но при наведении подчеркивание плавно появляется.

• Картинка стала круглой и по центру.

Откройте браузер. Разница с прошлой версией — как между черновиком и визиткой. И всё это — без изменения структуры HTML.

Разбираем самые интересные места

Сброс стилей: * { margin: 0; padding: 0 }

Звездочка * — универсальный селектор, применяется ко всем элементам. Браузеры по умолчанию добавляют свои отступы заголовкам, спискам и абзацам — и у каждого браузера они разные. Сброс в ноль дает нам чистый лист, на котором мы сами строим отступы. box-sizing: border-box — отдельная магия: padding теперь входит в ширину элемента, а не раздувает ее. Это правило вы будете писать в каждом проекте.

Центрирование: max-width: 700px; margin: 0 auto

max-width: 700px ограничивает ширину контейнера — на огромном мониторе текст не растянется на два метра. margin: 0 auto — классический трюк: нулевые отступы сверху и снизу, а auto слева и справа поровну делит свободное место. Результат — блок по центру.

Тень: box-shadow

box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);

Параметры по порядку: сдвиг по X, сдвиг по Y, размытие, цвет. rgba(0, 0, 0, 0.08) — черный с прозрачностью 8%. Тень еле заметная, но именно она создает ощущение «карточки», приподнятой над фоном.

Псевдоэлемент ::before

li::before {
    content: "→";
    position: absolute;
    left: 0;
}

::before создает невиртуальный элемент перед содержимым <li>. Свойство content задает его содержимое (стрелочку). position: absolute вырывает его из потока, а left: 0 прижимает к левому краю. Так мы заменили стандартные точки списка на кастомные стрелки.

Ховер: :hover

a:hover {
    border-bottom-color: #4a6cf7;
}

:hover срабатывает, когда курсор наведен на элемент. Мы задали ссылке прозрачную нижнюю границу (border-bottom: 1px solid transparent), а при наведении делаем ее видимой. Плюс transition: border-color 0.2s — плавный переход за 0.2 секунды вместо резкого скачка.

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

1. Забыли подключить CSS. Проверьте строку <link rel="stylesheet" href="style.css"> в <head> и что файл называется точно style.css.

2. Файл не в той папке. href="style.css" ищет файл рядом с index.html. Если CSS лежит в папке css, пишите href="css/style.css".

3. Точка и решетка. Класс — .intro (с точкой). Id — #main-title (с решеткой). Перепутали — стили не применятся.

4. Пропущенная точка с запятой. color: red без ; перед следующим свойством ломает всё правило.

5. Путаница margin и padding. Снаружи — margin, внутри — padding. Если фон элемента «прилипает» к тексту — добавьте padding. Если элементы «слипаются» — добавьте margin.

Что дальше

У нас есть скелет (HTML) и одежда (CSS). Страница выглядит прилично, но она статична — ничего не происходит при клике, нет анимаций, нет интерактива.

В следующей статье рубрики «Основы веб-разработки» мы добавим JavaScript: сделаем кнопку «Показать/скрыть» для блока с хобби, счетчик посещений и плавную прокрутку к разделам. Вы увидите, как страница «оживает» — и поймете, зачем вообще нужен третий язык.

Подписывайтесь, чтобы не пропустить: «JavaScript с нуля: как оживить страницу».

Что-то не отобразилось или хотите разобрать конкретное свойство подробнее? Пишите в комментариях.