Подключить CSS к HTML не так просто как кажется на первый взгляд. Есть несколько способов, и неверный выбор может заруинить архитектуру вашего сайта с самого старта.
Коротко для тех, кто спешит
Подключить CSS к HTML можно тремя способами: через внешний файл .css с тегом <link> в разделе <head>, через встроенные стили тегом <style> внутри документа или через инлайновый атрибут style прямо в HTML-теге.
Пример подключения CSS через тег <link>:
<head>
<link rel="stylesheet" href="shop-styles.css">
</head>Пример подключения через встроенные стили <style>:
<head>
<style>
/* обращаемся к классу кнопки корзины */
.cart-button {
/* красим фон в синий цвет */
background-color: blue;
/* делаем цвет текста белым */
color: white;
}
</style>
</head>Пример подключения через атрибут style:
<button style="background-color: blue; color: white;">Добавить в корзину</button>В большинстве проектов используют первый способ с тегом <link>, потому что он позволяет применять одни и те же стили к разным веб-страницам, а ещё браузер кеширует внешний CSS файл и быстрее загружает новые страницы при открытии.
Встроенные стили с тегом <style> лучше использовать для небольших проектов, например, тестов, прототипов, HTML-писем.
Инлайновые стили с атрибутом style подойдут для динамических стилей, в крайних случаях их можно использовать для микропроектов и точечного исправления багов.
Что такое подключение CSS к HTML и зачем оно нужно
Определение и роль CSS в HTML
CSS (каскадная таблица стилей) — это язык, который используют для оформления веб-страниц, баннеров, svg изображений, электронных книг и писем. Благодаря CSS мы видим цвета, шрифты, изображения и прочие элементы такими, какими они есть.
Например, без CSS главная страница журнала Код выглядела бы так:
Чаще всего CSS используют в связке с HTML для разработки сайтов. HTML нужен, чтобы задать структуру, CSS, чтобы проработать её внешний вид.
Почему CSS хранят отдельно от HTML
Хранить стили отдельно — это удобно.
Во-первых, можно прописать правила оформления в одном месте и применять их к разным элементам и даже разным html-файлам. Если мы работаем с сайтом на 500 страниц и на каждой странице есть одна кнопка, нам не надо писать для неё 500 стилей, достаточно прописать одно правило в CSS файле.
Во-вторых, в HTML коде проще разобраться, когда CSS находится в отдельном файле или участке.
Например, в этом коде CSS и HTML перемешаны.
<div style="border: 1px solid #ddd; padding: 15px; width: 250px;">
<h3 style="color: blue; margin: 0;">Беспроводные наушники</h3>
<p style="font-size: 20px; font-weight: bold;">3 500 ₽</p>
<button style="background-color: green; color: white; padding: 10px; border-radius: 5px;">В корзину</button>
</div>А здесь только HTML теги с классами для подключения CSS.
<div class="product-card">
<h3 class="product-title">Беспроводные наушники</h3>
<p class="product-price">3 500 ₽</p>
<button class="buy-button">В корзину</button>
</div>Подключить CSS к HTML можно тремя способами: через внешний файл при помощи тега <link>, через тег <style> и через инлайновые стили.
Способ 1 — как подключить css файл к html при помощи тега <link>
Синтаксис тега <link>: атрибуты rel, href, type
Самый корректный способ подключить CSS — использовать тег <link> внутри секции head, он подтягивает стили из внешнего CSS файла. Этот способ является стандартом в веб-разработке, его применяют в большинстве случаев.
<link rel="stylesheet" href="style.css" type="text/css">У тега link есть атрибуты rel, href и type.
При помощи rel=”stylesheet” браузер понимает, что тип подключаемого файла — это таблица стилей.
Через href=”style.css” мы передаём путь к CSS файлу. Если HTML и CSS лежат в одной папке, то можно просто указать название файла со стилями.
Запись type=”text/css” уточняет формат документа. Начиная с HTML5 мы можем не писать атрибут type, браузер поймёт формат и без него, но в старых проектах он всё ещё встречается.
Как подключить внешний css к html, пример кода:
<!DOCTYPE html>
<html lang="ru">
<head>
<!-- Подключаем внешний CSS-файл -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="main-title">Как подключить CSS к HTML</h1>
<h2 class="sub-title">три способа с примерами кода</h2>
</body>
</html>CSS стили:
/* настраиваем размер и цвет главного заголовка */
.main-title {
font-size: 32px;
color: #333333;
}
/* делаем подзаголовок чуть меньше и задаём серый цвет */
.sub-title {
font-size: 24px;
color: #777777;
}Результат:
Плюсы и минусы внешнего подключения
Среди плюсов такого подхода можно отметить:
Упорядоченность кода. HTML-код находится в одном месте, CSS в другом. Такой код проще читать и поддерживать.
Одно правило для разных html файлов. Если у нас 500 html страниц, то нам не надо писать 500 css правил, достаточно одного.
Быстрая загрузка страницы. При загрузке страницы браузер кеширует css код. Если открыть новую страницу на том же сайте, браузеру не придётся скачивать css заново, поэтому страница прогрузится быстрее.
Минусы у подключения CSS через тег <link> тоже есть:
Зависимость от скорости интернета. При первой загрузке страницы браузер скачивает css для кеширования. Если интернет медленный, а CSS-файл большой, то пользователь может увидеть на короткое время голый сайт без стилей.
Избыточность для микропроектов. Для небольших проектов внешний css может быть избыточным. Например, для одностраничного сайта где только заголовок и небольшой абзац текста.
Параллельная работа с несколькими файлами. Чтобы поправить стиль элемента в HTML коде, нужно открывать отдельно CSS файл.
Внешняя зависимость. Если с CSS файлом что-то случится, например, он удалится, то у страницы пропадёт оформление.
Ещё этот способ подходит не для всех типов разработки, напирмер, его не стоит использовать для вёрстки электронных писем. Сервисы электронной почты обычно блокируют внешние интеграции, файл со стилями, поэтому html письмо получится без оформления.
Способ 2 — как добавить css в html при помощи внутреннего тега <style>
Синтаксис тега <style> и место в документе
Второй способ добавить стили — использовать тег <style> внутри секции <head>. Для этого пишем открывающий тег <style>, прописываем внутри него CSS код и закрываем другим тегом </style>.
<!DOCTYPE html>
<html lang="ru">
<head>
<!-- Пишем стили прямо внутри тега <style> -->
<style>
/* настраиваем размер и цвет главного заголовка */
.main-title {
font-size: 32px;
color: #333333;
}
/* делаем подзаголовок чуть меньше и задаём серый цвет */
.sub-title {
font-size: 24px;
color: #777777;
}
</style>
</head>
<body>
<h1 class="main-title">Как подключить CSS к HTML</h1>
<h2 class="sub-title">три способа с примерами кода</h2>
</body>
</html>Браузер анализирует код страницы сверху вниз, сначала он получит правила из секции head, потом дойдёт до элементов в секции body и отрисует их, согласно заданным стилям.
Плюсы и минусы внутренних стилей
В серьёзной коммерческой разработке такое подключение CSS к HTML встречается редко, но для некоторых задач оно хорошо подходит:
Всё в одном месте. Это удобно, при разработке одностраничного лендинга или сайта-визитки. Не нужно переключаться между разными файлами.
Быстрая отрисовка. Браузеру не нужно тратить время на запрос и скачивать внешний CSS файла по сети. Для одной страницы это может ускорить первый рендер.
Из минусов стоит отметить, что:
Дублирование кода. Если у нас многостраничный сайт, то для изменения стилей придётся вносить одинаковые правки для каждой страницы. Поэтому внутренние стили редко применяют в таких сценариях.
Раздувание кода. Если стилей слишком много, HTML-документ станет большим, в нём будет сложнее ориентироваться и поддерживать код.
Подключать стили через тег <style> лучше в небольших проектах, например, в промостраницах, быстрых тестах, прототипах. В проектах крупнее такой поход осложнит масштабирование и поддержку кода.
Полезный блок со скидкой
Подобрать нужный способ подключения CSS — полдела. Сложнее — написать чистый, поддерживаемый код для целого проекта. Если хотите работать с современными ИТ-инструментами и расти в зарплате, — курсы от Яндекс Практикума помогут работать с нейронками профессионально.
Держите промокод Практикума (минус 8% !!!) на любой платный курс: KOD (можно просто на него нажать). Он даст скидку при покупке и позволит сэкономить на обучении.
Способ 3 — как подключить стили css в html при помощи атрибута style
Синтаксис атрибута style
Кроме тега <style>, есть атрибут style. Его пишут внутри HTML тегов и указывают CSS свойства со значениями, через точку с запятой.
<p style="color: red; font-weight: bold;">ошибка: неверный пароль</p>Этот способ сильно отличается от двух предыдущих. Если ранее мы создавали правила стилей в отдельном файле или внутри секции <head>, то при использовании атрибута style мы пишем стили внутри конкретных элементов, которые хотим поменять. Этот способ ещё называют подключением инлайновых стилей.
<!DOCTYPE html>
<html lang="ru">
<head>
<!-- Для инлайн-стилей внешние файлы или тег <style> не нужны -->
</head>
<body>
<!-- Пишем стили прямо внутри тегов с помощью атрибута style -->
<h1 style="font-size: 32px; color: #333333;">Как подключить CSS к HTML</h1>
<h2 style="font-size: 24px; color: #777777;">три способа с примерами кода</h2>
</body>
</html>Плюсы и минусы инлайновых стилей
В веб-разработке инлайновые стили считаются плохим тоном, потому что они ломают правило, где мы должны отделять структуру от дизайна. Но плюсы у данного подхода тоже есть:
Высокий приоритет. Допустим, у нас есть баг, элемент в HTML коде отображается некорректно и мы не можем найти источник проблемы. Можно просто указать внутри этого элемента инлайновый стиль, он перебьёт все другие свойства и сработает так, как надо.
Изоляция стилей. Правки в инлайновых стилях внутри одного элемента не сломают другие, похожие элементы.
Динамические стили. Стили бывают динамическими, например, мы кликаем на кнопку, и у нас появляется интерактивная шкала загрузки. В таких стилях обычно используют связку HTML + CSS + JavaScript. Последний проводит вычисления на ходу, поэтому ему важно, чтобы правила были прописаны внутри скрипта при помощи инлайновых стилей.
Минусы у этого подхода тоже ощутимые:
Ограниченность CSS. CSS в HTML-коде через атрибут style обладает рядом ограничений, мы не можем задавать псевдоклассы, псевдоэлементы и медиазапросы.
Код сложно читать. HTML-файл раздувается до больших размеров. Разработчику становится сложно читать разметку, где CSS перемешан с HTML.
Нельзя переиспользовать. Инлайновые стили не получится применить к нескольким элементам. Если у нас 10 страниц с текстом, то придётся отдельно писать стили для каждой из них.
Большой размер HTML-файла. Если стилей очень много, то при медленном интернете, HTML файл будет долго загружаться, что критично для SEO-оптимизации.
Инлайновые стили можно использовать в веб-разработке, но в самых крайних случаях, например, для микропроектов, прототипов, тестов, динамических стилей и быстрого исправления багов.
Сравнение трёх способов подключения CSS
| Характеристика | Внешние стили (тег <link>) | Внутренние стили (тег <style>) | Инлайновые стили (атрибут style) |
| Место размещения | Отдельный .css файл | Тег <style> в <head> | Атрибут style в html-теге |
| Область действия | Весь сайт (много страниц) | Одна страница | Конкретный html-элемент |
| Кеширование | Поддерживает | Не поддерживает | Не поддерживает |
| Приоритет отображения при конфликтах стилей | Базовый — браузер отрисует стили, если они не конфликтуют с другими стилями из тега <style> или атрибута style. | Средний — в случае конфликта, стили будут приоритетнее для отрисовки, чем внешние стили из тега <link>. | Самый высокий — если случился конфликт стилей, то браузер отдаст предпочтение свойствам инлайновых стилей, вместо внешних стилей или правил из тега <style>. |
| Пример кода | <link rel=”stylesheet” href=”style.css”> | <style> h1 { color: #fff; } </style> | <p style=”color: red;”>текст</p> |
| Когда использовать | Стандарт в веб-разработке, лучше использовать почти всегда. | Для уникальных страниц, микропроектов и быстрых прототипов. | Для email-писем, тестов и точечных правок багов. |
Порядок подключения нескольких CSS-файлов
Каскадирование и специфичность
В реальных проектах все стили редко прописаны в одном файле. Обычно разработчики подключают несколько файлов со стилями, например, в одном лежат шрифты, во втором — базовая сетка сайта, в третьем — другие уникальные стили.
Иногда правила стилей из разных источников могут друг другу противоречить. Поэтому браузеры решают такие конфликты при помощи каскадирования и специфичности.
Каскадирование
Каскадирование — это правило последней строки. Если у нас есть два равнозначных правила, побеждает то, которое браузер прочитал последним (то есть оно находится ниже в коде).
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="my-style.css">
</head>Если в этом примере у стилей возникнет конфликт, то браузер отрисует стили из файла my-style.css. Почему? Потому что сработал каскад, браузер прошёлся по коду сверху вниз и отдал приоритет последнему равнозначному правилу.
Специфичность
Но не все способы оформления считаются равнозначными. Браузер всегда отдаст приоритет тому стилю, который указывает на элемент более конкретно. Этот механизм называют специфичностью.
Специфичность рассчитывают при помощи числа от 0001 до 1000. Чем это число больше, тем выше специфичность и приоритетнее стиль.
Вот список css элементов с их специфичностью по убыванию.
Инлайновые стили (1-0-0-0) — атрибут style прописывают внутри конкретных тегов в html коде, поэтому у них самая высокая специфичность при рендере, они перекрывают любые правила из внешних и внутренних таблиц стилей — кроме правил с !important (их рассмотрим чуть позже).
Идентификаторы (0-1-0-0). Их прописывают индивидуально для каждого элемента, поэтому у них высокая специфичность.
Классы, атрибуты и псевдоклассы (0-0-1-0). Они указывают на конкретные типы элементов, а не сами элементы, поэтому их вес при определении приоритетов стилей меньше.
HTML-теги. В HTML тоже есть команды для визуального оформления элементов, но они устарели, браузеры отдают им наименьший приоритет.
Рассмотрим специфичность на примере. Допустим, у нас есть кнопка добавления товаров в корзину и 3 разных правила в CSS файле.
<button class="cart-btn" id="sale-item">в корзину</button>/* обращаемся по тегу (слабый вес) */
button {
background-color: gray;
}
/* обращаемся по классу (средний вес) */
.cart-btn {
background-color: blue;
}
/* обращаемся по id (максимальный вес) */
#sale-item {
background-color: green;
}Первое правило обращается по тегу, но у нас может быть много кнопок в коде. Эта специфичность будет слабой.
Второй стиль обращается по классу, это уже более точечное обращение к кнопкам с конкретными классами, специфичность будет выше.
Третье правило обращается по идентификатору. Он принадлежит одной конкретной кнопке, поэтому специфичность будет самой высокой.
Когда использовать !important
Представим ситуацию, мы написали правильный селектор, подключили CSS, но стиль всё равно не применяется. Такое часто бывает при конфликте стилей.
Для таких случаев существует оператор !important. Если его добавить к свойству в конец правила, перед точкой с запятой, то это свойство получит высокий приоритет и перебьёт другие свойства, даже идентификаторы и инлайновые атрибуты style.
Пример HTML-кода с конфликтом стилей:
<!-- В элементе конфликт стилей, есть класс из внешнего стиля и инлайновый стиль -->
<p class="system-alert" style="color: green;">Внимание! Сервер уходит на обновление.</p>Пример внешнего CSS-кода:
/* выбираем элемент с классом system-alert */
.system-alert {
/* разрешаем конфликт в пользу внешнего стиля с помощью !important */
color: red !important;
}Результат:
Оператором !important нельзя злоупотреблять. Если использовать его каждый раз, когда запутались в специфичности, то проект превратится в плохо читаемый код, который невозможно поддерживать. !important стоит использовать, только когда других вариантов не осталось.
Типичные ошибки при подключении CSS
Иногда браузер упрямо отказывается отображать правильные стили, в таких случаях виновниками могут быть следующие ошибки:
1. Неверный путь к файлу
Это самая частая проблема. Допустим, мы сложили все стили в другую папку, но в HTML-документе написали просто href=”style.css”. Браузер будет искать файл на одном уровне с HTML, не найдёт его и покажет страницу без оформления, тогда как стили лежат в другом месте.
Всегда проверяйте структуру папок в проекте. Если таблица стилей лежит в подпапке, путь должен быть точным, например, href=”css/style.css”.
2. Опечатки в атрибутах rel и href
Алгоритмы не умеют понимать контекст. Если случайно пропустить одну букву и написать rel=”styleshet” или забыть закрывающую кавычку, браузер не поймёт команду и не примет файл как таблицу стилей. Аналогично с атрибутом href.
Если столкнулись с ошибкой, проверьте атрибуты внутри тега <link>.
3. Кеш браузера
Иногда бывает, что мы подключили всё корректно, в коде нет ошибок, но браузер упрямо отображает неправильный стиль, например, кнопка серая вместо красной.
Скорее всего, браузер просто добавил в кеш старую версию внешнего CSS файла и игнорирует новые изменения.
Чтобы применить изменения, принудительно обновите страницу, если не помогает, сбросьте кеш.
Советуем дополнительно почитать по теме:
- Что такое соседние и родственные селекторы в CSS — следующая тема после подключения: как обращаться к нужным элементам через селекторы.
- Как использовать переменные в CSS — делаем CSS-файл удобнее в поддержке: переменные убирают дублирование и упрощают правки.
- Кто такой фронтенд-разработчик и что он делает — для тех, кто учит CSS с нуля и хочет понять, куда это всё ведёт профессионально.
Бонус для читателей
Если хотите освоить вёрстку системно и начать зарабатывать на фронтенде, — держите промокод Практикума на любой платный курс: KOD (можно просто нажать). Он даст скидку при покупке и позволит сэкономить на обучении.
Бесплатные курсы в Практикуме тоже есть — по всем специальностям и направлениям. Начать можно в любой момент, карту привязывать не нужно.
