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

Справочник · HTML и CSS · 2 минуты чтения

Создайте файл стилей, например css/style.css, и добавьте в <head> страницы строку:

HTML

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

Целиком страница выглядит так:

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Главная</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Главная</h1>
</body>
</html>

А в css/style.css — только правила CSS, без тегов <style>:

CSS

h1 {
  color: darkgreen;
}

Эту же строку <link> ставят на все страницы сайта — один файл оформляет их все.

Путь в href

Путь считается от страницы, как у картинок:

Где страница и стили	`href`
`index.html` и `style.css` в одной папке	`style.css`
`index.html`, стили в `css/style.css`	`css/style.css`
страница в `pages/about.html`, стили в `css/style.css`	`../css/style.css`

Другие два способа

Тег <style> в <head> — стили только для одной страницы:

HTML

<style>
  h1 {
    color: darkgreen;
  }
</style>

Атрибут style — стиль одного элемента:

HTML

<p style="color: gray; font-size: 14px;">Мелкий серый текст</p>

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

Несколько файлов стилей подключают несколькими <link> подряд. Порядок важен: при равной точности селекторов побеждают правила файла, подключённого ниже. Есть и правило @import url("other.css"); внутри CSS-файла, но с ним браузер узнаёт о втором файле позже и страница грузится медленнее — лучше несколько <link>.

Как проверить, что стили подключились

Добавьте в файл заметное правило, например body { background-color: yellow; }, сохраните и обновите страницу. Фон не пожелтел — файл не подключился. Дальше:

откройте исходный код страницы (Ctrl+U) и щёлкните по имени файла в <link>: если вместо CSS открылась ошибка, путь неверен;
в инструментах разработчика (F12) на вкладке «Network» («Сеть») после обновления видно, загрузился ли style.css, или у него код 404.

Подводные камни

Файл назван style.css.txt — Windows прячет расширения. Включите показ расширений в Проводнике.
В CSS-файле оставлены теги <style> — в файле .css их быть не должно, иначе первое правило сломается.
rel="stylesheet" забыт — без него браузер не поймёт, что это стили.
Правки не видны на сайте — браузер взял старую копию файла. Обновите страницу с очисткой кэша: Ctrl+F5 или Ctrl+Shift+R (на macOS — Cmd+Shift+R).

Если файл подключён, а отдельное правило не действует, — причины в справке Почему не применяется стиль CSS.