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

Чтобы подключить CSS к HTML, сохраните стили в файл и укажите путь к нему в head. Затем проверьте загрузку файла и применение правила к нужному элементу.

Что должно получиться

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

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

Здесь мы подключаем готовый внешний файл к обычному HTML-документу. Это отдельная задача от разработки всего дизайна, настройки сборщика и создания темы CMS. Когда простая связка станет понятна, искать неисправность в большом проекте будет легче.

Из чего это складывается

Разделите загрузку и применение

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

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

Как это сделать по шагам

1. Подготовьте учебную папку. Сохраните в ней HTML-документ и создайте текстовый файл styles.css. Убедитесь, что редактор не добавил скрытое расширение .txt.
2. Подключите файл в head. Добавьте элемент link с rel='stylesheet' и путём styles.css. В этом примере оба файла лежат рядом.
3. Выберите элемент для проверки. Добавьте обычному абзацу класс notice. Используйте уникальный для учебной страницы класс, чтобы случайно не затронуть все её элементы.
4. Запишите одно простое правило. В styles.css задайте цвет текста для .notice. На этом этапе не добавляйте одновременно много свойств: изменение должно быть легко сопоставить с результатом.
5. Сохраните оба файла и откройте страницу. Убедитесь, что смотрите тот документ, который редактировали. После изменения обновите страницу.
6. Проверьте загрузку CSS. В инструментах браузера найдите файл среди загруженных ресурсов и посмотрите его фактическое содержимое. Страница ошибки вместо CSS не считается успешным подключением.
7. Проверьте правило у элемента. Выберите нужный абзац в инспекторе и найдите объявление цвета. Посмотрите, применяется ли оно или уступает другому правилу.
8. Сохраните исправление в проекте. Если причину нашли временной правкой в инструментах браузера, перенесите изменение в исходный файл. Заново загрузите страницу и повторите проверку.

Минимальный пример подключения

Внутри head HTML-документа укажите внешний файл так:

<link rel='stylesheet' href='styles.css'>

В body того же учебного документа добавьте абзац с классом:

<p class='notice'>Проверка подключения стилей</p>

В файл styles.css запишите правило без HTML-тегов:

.notice { color: #2563EB; }

Точка перед notice в CSS означает выбор элементов с таким классом. В атрибуте class точку не ставят. Объявление color меняет цвет текста; фигурные скобки ограничивают набор объявлений правила. Учебный пример проверяет только эту связь и не задаёт оформление всего сайта.

Внешний файл содержит CSS, поэтому оборачивать его текст в style не нужно. Сам элемент link также не помещают внутрь файла стилей: он находится в HTML и сообщает браузеру адрес ресурса. Расширение .css не превращает случайный HTML-текст в корректную таблицу стилей.

Если CSS лежит в другой папке

Путь styles.css подходит, когда файл расположен рядом с HTML-документом. Если внутри той же папки проекта есть каталог css, путь к файлу в нём будет css/styles.css. При переносе документа на другую глубину относительный путь нужно проверить заново.

Путь /css/styles.css начинается от корня сайта на сервере. Он не равнозначен пути от папки открытого HTML-файла. При просмотре напрямую с диска поведение адресов отличается от публикации через веб-сервер, поэтому проверяйте учебный пример в тех условиях, где собираетесь его использовать.

Сравните регистр букв, дефисы и расширение. Файл Styles.css и указание styles.css могут совпадать в одной локальной среде и различаться на сервере с чувствительной к регистру файловой системой. Лучше использовать единое написание и проверять фактический адрес после загрузки.

Если файл загрузился, а стили не видны

Выберите конкретный элемент в инспекторе. Убедитесь, что его реальная разметка содержит нужный класс. CMS или JavaScript могут изменить документ после первоначальной загрузки; ориентируйтесь на текущее состояние элемента, с которым работает посетитель.

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

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

Правило «всегда побеждает то, что ниже» слишком грубое. В простом случае равных условий последнее объявление действительно получает преимущество, но это не универсальное объяснение. Для начальной диагностики надёжнее посмотреть применённое значение и файл-источник в инструментах браузера.

Не добавляйте !important вслепую

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

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

Проверьте, какой файл вы действительно редактируете

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

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

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

• Оставить неверное расширение. Файл styles.css.txt не равен styles.css, даже если редактор показывает похожее имя.
• Перепутать HTML и CSS. Элемент link находится в документе, а правила — во внешнем файле.
• Использовать другой класс. notice в разметке должен соответствовать .notice в селекторе.
• Считать код ответа достаточной проверкой. Сервер может вернуть HTML вместо ожидаемого CSS. Проверьте содержимое и тип ресурса.
• Судить по временной правке в инспекторе. Она помогает проверить гипотезу, но сама по себе не сохраняет изменение на сайте.
• Менять много свойств сразу. Для первого подключения достаточно одного заметного и понятного изменения.

Как проверить

• HTML-документ содержит подключение stylesheet с ожидаемым адресом.
• Файл существует по этому пути и содержит именно CSS.
• Сохранено актуальное содержимое обоих файлов.
• Селектор соответствует реальному элементу.
• У свойства и значения нет синтаксической ошибки.
• В инспекторе видно, какое объявление задаёт итоговое значение.
• Правка сохранена в исходном проекте и не исчезает после новой загрузки.

Основы подключения описаны в учебнике MDN, поиск причин — в руководстве по отладке CSS, правила приоритета — в описании каскада. Для практики пригодятся первая страница на HTML, проверка сайта на телефоне и проверка контраста. Помощь с вёрсткой можно найти через раздел «Разработка».

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

Вопросы и ответы

Обязательно ли хранить стили в отдельном файле?

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

Куда вставлять link с rel='stylesheet'?

В этом примере — внутрь head HTML-документа. Не вставляйте его в сам CSS-файл или обычный текст статьи. В CMS используйте предусмотренное подключение ресурсов шаблона, чтобы система корректно сформировала документ.

Почему стили работают локально, а на сервере нет?

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

Нужно ли писать type='text/css'?

Для обычной таблицы стилей этот атрибут в современном HTML можно опустить. При этом сервер должен отдавать сам файл как корректный CSS-ресурс. Добавление атрибута не исправляет HTML-страницу ошибки по указанному пути.

Почему правило видно зачёркнутым?

Инструменты браузера могут так показывать объявление, которое уступило другому. Сравните итоговое свойство и источник выбранного значения. Не делайте вывод только по положению правила в файле: действуют условия каскада.

Можно ли подключить один файл к нескольким страницам?

Да. Укажите подходящий путь в каждом документе или общем шаблоне. Проверьте страницы на разной глубине каталогов, чтобы относительное расположение не привело к загрузке другого адреса.

Почему после обновления страницы исчезла правка?

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