Как подключить CSS к HTML: три способа и проверка, что стили применились

Чтобы подключить CSS к HTML, сохраните стили в отдельный файл style.css и добавьте в <head> страницы одну строку: <link rel="stylesheet" href="style.css">. Браузер скачает файл и применит правила ко всем элементам. Этот способ стоит выбирать по умолчанию.

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

CheckroiПодборка курсов по CSS182 курса • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Как подключить CSS-файл через тег link

Внешний файл удобен тем, что один набор стилей подключается к любому числу страниц. Поменяли цвет кнопки в style.css, и он сменился на всём сайте.

1. Создайте папку проекта и положите в неё index.html. Как это сделать в Блокноте или редакторе кода, мы разобрали в инструкции как создать HTML-файл.
2. Рядом создайте папку css, а в ней файл style.css. Расширение должно быть именно .css.
3. Впишите в файл первое правило, например цвет заголовка.
4. Откройте index.html и вставьте тег <link> между <head> и </head>.
5. Сохраните оба файла и обновите страницу в браузере.

Структура проекта получится такой:

moj-sajt/
├── index.html
└── css/
    └── style.css

Код страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Мой первый сайт</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Мой первый сайт</h1>
  <p>Эта страница выглядит так благодаря одному файлу style.css.</p>
</body>
</html>

И сам файл стилей:

h1 {
  color: #7324ff;
  font-size: 30px;
}

p {
  font-size: 18px;
  line-height: 1.5;
}

Вот как похожая страница, дополненная списком и кнопкой, выглядит в Chrome 154 без файла стилей и с ним.

Что значат rel, href и type

Обязательных атрибутов у тега два. Остальные нужны в отдельных случаях.

Описание всех атрибутов есть в справочнике MDN по тегу link и в спецификации HTML.

Атрибут media пригодится, когда вы делаете отдельную версию для печати: <link rel="stylesheet" href="print.css" media="print">. Мы проверили это в Chrome: на экране файл не действует, при печати заголовок перекрашивается. Условия по ширине экрана удобнее писать внутри CSS, этому посвящена статья про медиа-запросы.

Как указать путь к файлу CSS

Больше всего вопросов «почему стили не подключились» связано с путём в href. Браузер ищет файл относительно адреса страницы. Где лежит папка проекта на диске, ему неважно.

Мы проверили типичную ошибку. Страница лежит в папке blog, а путь скопирован с главной: css/style.css. Браузер запросил /blog/css/style.css, получил 404 и показал голую разметку. С путём ../css/style.css та же страница оформилась.

Второй подвох касается пути от корня. Пока сайт работает через локальный сервер или хостинг, /css/style.css находится. Если же открыть страницу двойным щелчком, адрес начнётся с file:///, и браузер станет искать файл в корне диска. В Chrome это закончилось ошибкой ERR_FILE_NOT_FOUND.

Совет: пока учитесь и открываете файлы прямо с диска, пишите относительные пути. Корневые /css/… оставьте для сайта на сервере.

И ещё одно. На большинстве хостингов стоит Linux, а там Style.css и style.css считаются разными файлами. На своём компьютере под Windows или macOS всё работает, а после загрузки на сервер стили пропадают. Называйте файлы строчными латинскими буквами.

Внутренние стили в теге style

Стили можно написать прямо в HTML-документе, внутри тега <style> в разделе <head>:

<head>
  <meta charset="utf-8">
  <title>Страница</title>
  <style>
    h1 { color: #7324ff; }
    p { font-size: 18px; }
  </style>
</head>

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

Тег <style> живёт в служебной части документа рядом с <title> и <meta>. Как устроен HTML-документ целиком, мы разбирали в статье что такое HTML.

Минус тот же, что у любого копирования: на сайте из десяти страниц правку придётся вносить десять раз. Атрибут type="text/css" у тега <style> писать не нужно. Валидатор W3C на него выдаёт предупреждение, что атрибут лишний.

Инлайн-стили в атрибуте style

Третий способ задаёт оформление одному элементу через атрибут style:

<p style="color: #7324ff; font-size: 18px;">Этот абзац фиолетовый.</p>

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

Где инлайн-стили встречаются на практике:

• в HTML-письмах, потому что часть почтовых программ не загружает внешние файлы и вырезает тег <style>;
• когда значение подставляет скрипт, например ширину полосы загрузки;
• для быстрой проверки «а что будет, если».

Для обычной вёрстки инлайн-стили неудобны. Оформление размазывается по разметке, повторяется в каждом элементе, а перебить его из файла можно только через !important. Почему так происходит, объясняют правила каскада и специфичности, их подробно разбирают на курсах по CSS.

Другие способы: @import и JavaScript

Правило @import

Один CSS-файл может подключить другой:

@import url("base.css");

h1 { color: #7324ff; }

Главное условие: @import стоит в самом начале файла, выше всех остальных правил. Так требует спецификация CSS Cascade. Мы проверили, что будет при нарушении: когда @import переехал под правило для h1, Chrome проигнорировал вложенный файл, и в консоли об этом не появилось ни строчки.

Ещё один минус в скорости. Браузер узнаёт о вложенном файле, только когда скачает и прочитает первый, поэтому загрузка идёт цепочкой. Несколько тегов <link> подряд грузятся параллельно.

Подключение из JavaScript

Иногда стили нужно добавить уже после загрузки страницы, например для виджета или темы оформления. Скрипт создаёт тег <link> и вставляет его в <head>:

const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "css/style.css";
document.head.append(link);

В нашем тесте стили применились так же, как при обычном подключении. Как скрипт находит и меняет элементы страницы, мы объясняли в статье про DOM-дерево.

Чужие стили по CDN

Готовые библиотеки подключают тем же тегом, только в href пишут полный адрес:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-normalize@3.0.1/modern-normalize.min.css">

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

Какой способ выбрать

Если сомневаетесь, берите внешний файл. Остальные способы решают частные задачи. Об устройстве вёрстки в целом подробнее в материале что такое вёрстка.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Какие стили важнее, если правила спорят

Бывает, что один и тот же элемент получает разные значения из файла, тега <style> и атрибута. Ниже один заголовок с четырьмя наборами правил и цвет, который в каждом случае выбрал Chrome.

• Файл и тег <style> равны по силе. Побеждает то правило, что стоит ниже в коде. Поставили <style> после <link>, заголовок стал зелёным. Поменяли местами, и он снова синий.
• Атрибут style сильнее обоих. Красный из атрибута перебил и файл, и тег.
• !important в файле сильнее обычного инлайн-стиля. Поэтому !important лучше оставить для крайних случаев, иначе потом его придётся перебивать таким же !important.

Порядок важен и между файлами. Если подключено несколько <link>, при равной специфичности селекторов выигрывает правило из последнего.

Почему CSS не подключается

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

1. Нет rel="stylesheet" или в нём опечатка. С rel="styleshet" браузер даже не стал скачивать файл.
2. Неверный путь. Откройте инструменты разработчика (F12), вкладку Network, и обновите страницу. Файл стилей с кодом 404 значит, что путь в href ведёт не туда. Как проверять сетевые запросы, описано в документации Chrome DevTools.
3. Путь от корня при открытии с диска. /css/style.css под адресом file:/// указывает в корень диска. Замените на относительный путь.
4. Файл называется style.css.txt. Windows по умолчанию скрывает расширения, и Блокнот мог дописать своё. Включите показ расширений в Проводнике и переименуйте файл.
5. Сервер отдаёт файл с неверным типом. Мы отдали style.css с заголовком Content-Type: text/plain: файл скачался с кодом 200, но стили не применились. В Network у файла стилей должен быть тип text/css.
6. Лишний или неверный type. С type="text/plain" Chrome файл проигнорировал. Проще удалить атрибут совсем.
7. Браузер показывает старую версию. Он кеширует CSS-файлы. Обновите страницу без кеша (Ctrl+F5, на Mac Cmd+Shift+R) или допишите к адресу версию: style.css?v=2.
8. Правило перебито другим. Файл подключился, но конкретное свойство не работает. На вкладке Elements выделите элемент: перечёркнутое свойство на панели Styles значит, что его перекрыло более сильное или более позднее правило.

Разметку стоит прогнать через валидатор W3C: тег <link> без rel он помечает как ошибку. Редактор кода с подсветкой тоже ловит половину опечаток, подборка таких программ есть в статье о редакторах для веб-разработки.

Тег <link> со стилями разрешено ставить и внутри <body>: в спецификации HTML тип stylesheet отмечен как допустимый в теле документа, и в нашем тесте стили применились. Но пока браузер дойдёт до такого тега, часть страницы успеет показаться без оформления, поэтому привычное место для <link> всё-таки <head>.

Где освоить HTML и CSS системно

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

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

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Frontend-разработчик: сайты на HTML/CSS/JavaScript Перейти на сайт курса	Coddy	9200 ₽	-	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Frontend-разработчик: сайты на HTML/CSS/JavaScript

  Coddy9200 ₽3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по CSS