Исполняемые доки CSS: Внешний CSS

Q: Что такое внешний CSS?

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

Q: Как подключить CSS-файл к HTML?

Добавьте внутрь . href это путь относительно HTML-файла: css/styles.css указывает в папку css рядом с ним, а /styles.css отсчитывается от корня сайта.

Q: Почему не работает внешний CSS?

Обычные причины: неверный путь в href (ищите 404 на вкладке Network), нет rel="stylesheet", теги внутри файла .css или более позднее правило, которое перебивает ваше. Жесткая перезагрузка исключает старую копию из кеша.

Внешний и внутренний CSS: link и style

Внешний CSS хранится в файле .css, который каждая страница подключает через <link rel="stylesheet">; внутренний CSS находится в элементе <style> на одной странице. Разберем оба способа, пути к файлам и то, какое правило побеждает при их встрече.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Внешний CSS в одной строке

Внешний CSS это отдельный файл .css. Его подключают из <head> каждой страницы, которой он нужен:

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

В самом файле лежат обычные правила CSS, без HTML-тегов вокруг:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

Превью ниже неоткуда загрузить второй файл, поэтому тот же CSS помещен в элемент <style>. Это внутренний CSS, и выглядит он точно так же, как подключенный файл:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

Внутренний CSS: элемент style

Внутренний CSS это элемент <style> на странице. Разместите его в <head>, чтобы стили были известны до отрисовки body. Он действует на всю страницу, а его правила используют селекторы, чего не умеют встроенные атрибуты style.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

Наведите курсор на тег: :hover здесь работает, потому что это настоящее правило. Третий способ, атрибут style, описан на странице про inline CSS.

Внутренний и внешний CSS

	Внешний (`<link>`)	Внутренний (`<style>`)
Где	Файл `.css`	Внутри HTML-страницы
Область действия	Все страницы, которые его подключают	Одна страница
Кеширование	Скачивается один раз, используется на всех страницах	Отправляется заново с каждой страницей
Смена оформления сайта	Правка одного файла	Правка каждой страницы
Дополнительный запрос	Да, по одному на файл	Нет
Подходит для	Настоящих сайтов	Демо, одиночных страниц, HTML-писем, критического CSS

Специфичность у обоих одинаковая: правило в элементе <style> и то же правило в подключенном файле весят ровно одинаково. При равенстве побеждает то, что идет в документе позже.

Порядок: побеждает более поздняя таблица стилей

Таблицы стилей читаются в порядке документа, и <link>, и <style>. Из двух правил с одинаковой специфичностью побеждает более позднее. Два блока <style> ниже изображают подключенный файл и следующее за ним переопределение на уровне страницы:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

Кнопка сохраняет отступы и белый текст из первого правила и берет из второго только фон. Поэтому таблицу стилей сайта ставят после таблицы фреймворка: сначала <link> на библиотеку, потом на свою.

Пути к файлам в href

href у <link> это URL, который вычисляется относительно расположения HTML-файла.

href	Загружает
`styles.css`	Файл в той же папке, что и страница
`css/styles.css`	Папку `css` рядом со страницей
`../styles.css`	На одну папку выше
`/styles.css`	От корня сайта
`https://example.com/a.css`	Полный URL на другом сервере

Если страницы сайта лежат на разной глубине, путь от корня (/css/styles.css) работает на каждой из них.

Таблицы стилей для печати и других сред

Атрибут media ограничивает таблицу стилей подходящими условиями. Его принимают и <link>, и <style>:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

Превью это экран, поэтому баннер виден. На настоящей странице баннер исчезает при печати, а в DevTools то же самое видно, если эмулировать тип среды print (панель Rendering).

Частые ошибки

Неверный путь. Опечатка в href ничего не загружает, и страница остается без стилей. Откройте DevTools, вкладку Network, и найдите 404 на файле .css.
Забытый rel="stylesheet". Без него <link href="styles.css"> не загружает таблицу стилей.
HTML внутри файла .css. В файле .css только правила. Теги <style> в нем не являются валидным CSS и ломают соседнее правило.
Своя таблица стилей раньше таблицы фреймворка. При равной специфичности побеждает более поздний файл, поэтому свой CSS подключайте последним.
Видна старая версия. Браузеры кешируют таблицы стилей. Сделайте жесткую перезагрузку или добавьте версию в URL (styles.css?v=2) при выкладке изменений.

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

Что такое внешний CSS?

Внешний CSS это таблица стилей в отдельном файле .css, которую загружают через <link rel="stylesheet" href="styles.css"> в <head> страницы. Все страницы, подключившие файл, получают одинаковые стили, а браузер кеширует файл между страницами.

Что такое внутренний CSS?

Внутренний CSS, его также называют встроенной таблицей стилей, это CSS внутри элемента <style> в самом HTML-документе, обычно в <head>. Он действует только на эту страницу.

Как подключить CSS-файл к HTML?

Добавьте <link rel="stylesheet" href="styles.css"> внутрь <head>. href это путь относительно HTML-файла: css/styles.css указывает в папку css рядом с ним, а /styles.css отсчитывается от корня сайта.

Что лучше, внутренний или внешний CSS?

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

Почему не работает внешний CSS?

Обычные причины: неверный путь в href (ищите 404 на вкладке Network), нет rel="stylesheet", теги <style> внутри файла .css или более позднее правило, которое перебивает ваше. Жесткая перезагрузка исключает старую копию из кеша.

Связанные концепции