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

Есть три способа добавить CSS к HTML-странице: внешний файл через тег <link>, внутренний блок <style> прямо в HTML, и атрибут style="" на конкретном элементе. Разбираем каждый с примерами и объясняем, когда что использовать.

Содержание

Способ 1: Внешний CSS файл — рекомендуется
Атрибуты тега <link>
Пути к файлу CSS — относительные и абсолютные
Несколько CSS файлов — порядок важен
CSS для печати — media атрибут
Способ 2: Тег <style> внутри HTML
Способ 3: Инлайн стиль — атрибут style=»»
Сравнение трёх способов подключения CSS
Порядок загрузки и приоритет стилей
Часто задаваемые вопросы
Почему CSS не применяется к HTML?
Можно ли подключить несколько CSS файлов?
Куда ставить тег <link> — в <head> или <body>?
Как подключить Google Fonts через CSS?

Способ 1: Внешний CSS файл — рекомендуется

Самый правильный способ — хранить стили в отдельном файле .css и подключать его через тег <link> в блоке <head>. Один файл стилей работает для всех страниц сайта, кэшируется браузером и легко поддерживается.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Мой сайт</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Привет!</h1>
  <p class="lead">Текст страницы</p>
  <button class="btn">Нажми меня</button>
</body>
</html>

/* styles.css */
body {
  font-family: 'Inter', Arial, sans-serif;
  background-color: #f9fafb;
  color: #111827;
  margin: 0;
  padding: 0;
}

h1 {
  color: #2563eb;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.lead {
  color: #374151;
  line-height: 1.6;
}

.btn {
  background: #2563eb;
  color: white;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

Подключение внешнего CSS файла через link rel stylesheet href styles css в head HTML — Внешний файл — основной способ для реального сайта: HTML остаётся чистым, а styles.css можно переиспользовать на разных страницах.

Атрибуты тега <link>

Атрибут	Значение	Описание
`rel`	`stylesheet`	Обязательно — тип связи
`href`	путь к файлу	Относительный или абсолютный путь
`media`	`screen`, `print`, `all`	Для каких устройств применять
`type`	`text/css`	Необязателен в HTML5

Пути к файлу CSS — относительные и абсолютные

Путь в атрибуте href — это адрес CSS файла относительно HTML-файла. Важно не ошибиться с путём, иначе стили не загрузятся.

<!-- Файл styles.css лежит рядом с index.html -->
<link rel="stylesheet" href="styles.css">

<!-- Файл в подпапке css/ -->
<link rel="stylesheet" href="css/styles.css">

<!-- Файл на уровень выше -->
<link rel="stylesheet" href="../styles.css">

<!-- Абсолютный путь от корня сайта -->
<link rel="stylesheet" href="/assets/css/styles.css">

<!-- Файл с внешнего CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

Проверка пути к CSS файлу в href через Network 200 и 404 — Когда CSS не применяется, первым делом проверяют путь в href и статус файла в Network: нужен 200, а не 404.

Несколько CSS файлов — порядок важен

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

<head>
  <!-- 1. Сначала сброс стилей -->
  <link rel="stylesheet" href="css/reset.css">

  <!-- 2. Общие стили всего сайта -->
  <link rel="stylesheet" href="css/main.css">

  <!-- 3. Стили конкретной страницы -->
  <link rel="stylesheet" href="css/blog-post.css">
</head>

Несколько CSS файлов reset main page подключаются по порядку и поздний файл переопределяет ранний — Файлы стилей читаются сверху вниз: то, что подключено позже, может переопределить одинаковые свойства.

CSS для печати — media атрибут

Атрибут media позволяет подключать разные стили для экрана и принтера. При печати можно скрыть ненужные элементы и настроить вид документа.

<!-- Стили для экрана -->
<link rel="stylesheet" href="screen.css" media="screen">

<!-- Стили для принтера -->
<link rel="stylesheet" href="print.css" media="print">

<!-- Оба варианта -->
<link rel="stylesheet" href="main.css" media="all">

/* print.css — стили для печати */
nav, .sidebar, .footer, .ads {
  display: none;  /* скрыть навигацию при печати */
}

body {
  font-size: 12pt;
  color: black;
  background: white;
}

CSS media screen print демонстрация страницы на экране и в печати — Через media можно оставить яркий экранный интерфейс и одновременно подготовить чистую версию для печати.

Способ 2: Тег <style> внутри HTML

Стили можно написать прямо в HTML — в теге <style> внутри <head>. Браузер применяет их только к текущей странице.

<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f8f9fa;
    }

    h1 {
      color: #333;
      font-size: 2rem;
    }

    .highlight {
      background: yellow;
      padding: 2px 6px;
    }
  </style>
</head>

Тег style внутри head HTML и результат CSS на текущей странице — Тег style удобен для быстрого показа или прототипа, но в обычном проекте стили лучше вынести в отдельный файл.

Когда использовать тег <style>:

Одностраничные HTML-файлы (прототипы, демо)
Email-вёрстка — внешние файлы не поддерживаются многими почтовыми клиентами
Быстрый тест стиля без создания файла

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

Способ 3: Инлайн стиль — атрибут style=»»

Стиль можно задать прямо на элементе через атрибут style="". Пишется без селектора — только свойство и значение через точку с запятой.

<h1 style="color: #2563eb; font-size: 2rem; margin-bottom: 8px;">Заголовок</h1>
<p style="color: #6b7280; line-height: 1.6;">Абзац текста</p>
<button style="background: #16a34a; color: white; padding: 8px 20px; border: none; border-radius: 6px;">
  Кнопка
</button>

Атрибут style в HTML элементе и инспектор показывает inline style с высоким приоритетом — Инлайн style подходит для редких динамических случаев, но для обычной вёрстки он быстро делает HTML тяжёлым.

Почему инлайн стили — плохая практика в вёрстке:

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

Когда инлайн стили уместны: динамические стили через JavaScript (изменение позиции, размера, цвета на основе данных), HTML-письма (вынуждены).

// JavaScript — когда инлайн стили оправданы
const bar = document.getElementById('progress');
bar.style.width = progress + '%';   // динамическая ширина
bar.style.backgroundColor = color;  // динамический цвет

Сравнение трёх способов подключения CSS

Способ	Переиспользование	Кэширование	Приоритет (специфичность)	Когда использовать
Внешний файл `<link>`	✅ Все страницы	✅ Да	Низкий	Всегда в реальных проектах
Тег `<style>`	🟡 Только эта страница	❌ Нет	Низкий	Одностраничные файлы, email
Атрибут `style=""`	❌ Только один элемент	❌ Нет	Высокий	JS-манипуляции, email-вёрстка

Порядок загрузки и приоритет стилей

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

/* 1. Стили браузера по умолчанию (самый низкий приоритет) */
/* 2. Внешний CSS файл */
/* 3. Тег <style> в HEAD */
/* 4. Атрибут style="" на элементе */
/* 5. !important — перебивает всё (использовать редко) */

/* Пример конфликта: */
/* styles.css */
p { color: blue; }

/* В HTML: */
/* <style> p { color: red; } </style> */
/* Тег <style> идёт позже — применится красный */

/* Но: */
/* <p style="color: green"> — инлайн всегда победит */

Лестница приоритета CSS browser default external CSS style inline important — Когда несколько правил спорят за одно свойство, итог зависит от порядка, специфичности и источника правила.

Часто задаваемые вопросы

Почему CSS не применяется к HTML?

Проверь по порядку: 1) Правильный ли путь в href — откройте DevTools (F12) → Network → найдите CSS файл, статус должен быть 200, а не 404. 2) Правильно ли написан тег — rel="stylesheet" обязателен. 3) Синтаксис CSS — одна ошибка (пропущена скобка или точка с запятой) может сломать все стили ниже. 4) Специфичность — возможно другое правило с более высоким приоритетом перебивает ваш стиль.

Можно ли подключить несколько CSS файлов?

Да, можно подключить любое количество CSS файлов через несколько тегов <link>. Они применяются в порядке подключения — файл, подключённый позже, перезаписывает более ранние стили при совпадении. Это стандартная практика: отдельные файлы для reset, типографики, компонентов, страниц.

Куда ставить тег <link> — в <head> или <body>?

Всегда в <head>, до закрывающего тега </head>. Если поставить в <body>, браузер сначала отрисует страницу без стилей (мелькание), потом применит CSS — плохой UX. Технически это работает, но нарушает стандарт HTML и вызывает мигание нестилизованного контента (FOUC — Flash of Unstyled Content).

Как подключить Google Fonts через CSS?

Google Fonts подключаются через тег <link> перед вашим CSS файлом — чтобы шрифт был доступен в ваших стилях:

<head>
  <!-- Сначала Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

  <!-- Потом ваш CSS, где используете этот шрифт -->
  <link rel="stylesheet" href="styles.css">
</head>

/* styles.css */
body {
  font-family: 'Inter', Arial, sans-serif;
}

Как подключить CSS к HTML — три способа