Если CSS не работает, сначала добавьте в head строку <link rel="stylesheet" href="./style.css">, затем откройте Network и проверьте, получил ли файл style.css статус 200. Так вы за минуту разделите две разные проблемы: браузер не нашёл таблицу стилей или загрузил её, но конкретное правило не применилось.
Когда страница остаётся белой и неоформленной, хочется переписать весь CSS. Обычно это только мешает. У подключения есть короткая цепочка: HTML содержит правильный link, путь ведёт к существующему файлу, браузер получает его, а селектор выигрывает каскад. Проверять нужно именно в этом порядке.
Network покажет, пытался ли браузер скачать style.css и какой ответ получил.
Styles покажет, совпал ли селектор с элементом и не переопределён ли он.
После каждой правки сохраните файлы и обновите страницу без кеша.
CSS не загрузился или не применился: в чём разница
Фраза «CSS не работает» описывает два сценария. В первом браузер вообще не получил файл: путь ошибочный, имя не совпадает или link записан неверно. Во втором файл загружен, но нужный стиль проиграл более сильному правилу, содержит ошибку или выбирает не тот элемент.
| Что видно | Вероятная причина | Где смотреть |
|---|---|---|
| Вся страница без оформления | style.css не загрузился | Network и тег link |
| Работает часть правил | Ошибка синтаксиса ниже по файлу | Редактор и Styles |
| Не меняется один элемент | Селектор не совпал или проиграл каскад | Elements, Styles, Computed |
| Локально работает, на сайте нет | Регистр букв, путь или кеш | Network на опубликованном адресе |
| После правки виден старый цвет | Браузер использует кеш | Disable cache и жёсткое обновление |
Статус 404 у style.css означает проблему подключения. Статус 200 означает, что файл найден и дальше нужно проверять селектор, синтаксис и каскад.
Если цепочка оборвалась до ответа 200, менять селекторы в CSS пока бессмысленно.
Как правильно подключить style.css
Элемент link размещают внутри head. Атрибут rel="stylesheet" объясняет браузеру назначение ресурса, а href содержит абсолютный или относительный адрес. Атрибут type="text/css" для обычной таблицы стилей не нужен.
- Создайте папку
css-testи два файла:index.htmlиstyle.css. - Вставьте HTML и CSS ниже. Оба файла должны лежать рядом.
- Сохраните файлы и откройте
index.htmlв браузере. - Если карточка стала синей, подключение работает. После этого переносите строку link и тестовое правило в свой проект.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Проверка CSS</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main class="card">
<h1>CSS подключён</h1>
<p>Если фон синий, браузер нашёл style.css.</p>
</main>
</body>
</html>body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
font-family: Arial, sans-serif;
background: #eef1ff;
}
.card {
max-width: 520px;
padding: 32px;
border-radius: 24px;
color: white;
background: #5362ee;
}- HTML-файл действительно читает внешний style.css.
- Путь
./style.cssверен для двух файлов в одной папке. - Если ваш большой проект всё ещё не оформлен, ошибку можно искать сравнением с этим минимальным примером.
Как проверить путь и имя файла
Относительный путь читается от HTML-документа. Если style.css лежит рядом с index.html, подходит ./style.css. Если он находится в папке css, нужен ./css/style.css. Две точки в начале поднимают поиск на один уровень вверх.
| Структура | Правильный href | Частая ошибка |
|---|---|---|
| index.html и style.css рядом | ./style.css | Указана несуществующая папка css |
| index.html, папка css/style.css | ./css/style.css | Пропущено имя папки |
| pages/about.html, css/style.css | ../css/style.css | Путь записан как для главной страницы |
| Опубликованный сайт | Точное имя с тем же регистром | Style.css не совпадает со style.css |
Не угадывайте путь по памяти: пройдите по дереву папок от текущего HTML-файла до style.css.
Адрес должен заканчиваться именем файла, например ./css/style.css, а не только ./css/.
Windows может скрывать расширения. Включите их отображение и уберите лишнее .txt.
Элемент a создаёт ссылку для перехода. Таблицу стилей загружает только link с отношением stylesheet.
Как найти проблему в DevTools
Откройте инструменты разработчика клавишей F12, перейдите в Network и обновите страницу. В фильтре CSS найдите style.css. Затем откройте Elements, выберите проблемный элемент и посмотрите панель Styles. Зачёркнутое свойство загружено, но проиграло другому правилу.
- Обновите страницу при открытом Network. Если запроса style.css нет, браузер не увидел корректный link.
- Если ответ 404, нажмите запрос и сравните Request URL с реальным расположением файла.
- Если ответ 200, откройте вкладку Response. Там должен быть ваш CSS, а не HTML-страница ошибки.
- Выберите элемент через инспектор и найдите нужное свойство в Styles.
- Если правило зачёркнуто, посмотрите, какое правило расположено выше или имеет более сильный селектор.
- Для проверки кеша включите Disable cache при открытых DevTools и обновите страницу.
Некоторые серверы отвечают статусом 200 даже страницей-заглушкой. Если в Response находится HTML вместо CSS, путь или настройка сервера всё равно неверны.
8 проверок, если CSS всё ещё не работает
Когда файл загружен, проблема обычно находится в самом правиле или каскаде. Браузер игнорирует некорректное объявление и продолжает читать остальные. Поэтому одна опечатка не всегда ломает весь файл, но может оставить без оформления конкретное свойство или блок.
Ответ 200 подтверждает загрузку файла, но только совпавший селектор может изменить выбранный элемент.
- link: элемент находится внутри head, есть
rel="stylesheet"иhref. - Путь: Request URL ведёт к реальному style.css и получает 200.
- Имя: регистр букв и расширение файла совпадают полностью.
- Сохранение: редактор не показывает точку несохранённого файла.
- Селектор: класс
.cardв CSS совпадает сclass="card"в HTML. - Синтаксис: закрыты фигурные скобки, после свойства стоит двоеточие, после значения точка с запятой.
- Каскад: свойство не зачёркнуто более поздним правилом, inline-стилем или
!important. - Кеш: страница обновлена при включённом Disable cache или через жёсткое обновление.
Как подключить CSS к HTML?
Добавьте в head элемент <link rel="stylesheet" href="./style.css">. href должен вести к существующему CSS-файлу.
Почему CSS работает локально, но не на хостинге?
Частая причина в регистре букв и абсолютных путях. На сервере Style.css и style.css могут считаться разными файлами.
Что означает 404 у style.css?
Браузер запросил адрес, по которому файла нет. Исправьте href, структуру папок, имя или регистр букв.
Почему правило CSS зачёркнуто в DevTools?
Оно совпало с элементом, но проиграло каскад другому правилу. DevTools показывает победившее значение и файл, откуда оно пришло.
Нужно ли писать type=text/css?
Нет. Для обычного link со stylesheet атрибут type можно не указывать. Достаточно rel и правильного href.
Вернитесь к первому сайту на HTML, CSS и JavaScript, затем разберите 10 стартовых строк CSS. Общую роль трёх технологий объясняет материал как работает фронтенд.
В курсе CSS в Кодике можно закрепить селекторы, каскад, Flexbox и Grid на коротких упражнениях. Если проблема оказалась в разметке head или путях, повторите основу в курсе HTML.