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

HTML — это скелет страницы, но без таблицы стилей, CSS, он выглядел бы как документ из 90-х. Красивыми, удобными и современными сайты делает именно CSS. Как именно правильно подключать стили к странице, разберём сегодня в этой статье.

Что такое CSS и в чём его отличие от HTML

CSS (Cascading Style Sheets) — это каскадные таблицы стилей, которые отвечают за внешний вид страницы: цвета, шрифты, отступы, анимации. С его помощью можно превратить примитивную HTML-страницу в красивый сайт.

HTML — это язык гипертекстовой разметки (HyperText Markup Language). Это набор команд, которые говорят браузеру, какие элементы должны быть на странице (заголовки, кнопки, изображения).

Что такое HTML (и почему это важно)

👉 HTML задаёт структуру, а CSS добавляет оформление элементам. Вот как это выглядит:

Способы подключения CSS к HTML

CSS можно подключить к HTML разными способами в зависимости от задач:

Если нужно стилизовать один конкретный элемент, проще всего использовать встроенные стили (inline CSS).
Если стили уникальны для одной страницы, можно добавить их прямо в <style> внутри HTML (internal CSS).
А если нужно использовать одни и те же стили на нескольких страницах, лучше подключить отдельный CSS-файл (external CSS).

10 полезных инструментов для создания роскошного CSS

Разберём на примерах.

Встроенный стиль (Inline CSS)

Добавляются прямо в HTML-элемент с помощью атрибута style. Допустим, мы прописываем отдельный стиль для картинки:

<img src="photo.jpg" style="width: 200px; height: auto;">

Это удобно, если нужно быстро изменить стиль одного конкретного элемента — изменить размер изображения или скрыть блок. Работает мгновенно, без дополнительных файлов.

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

CSS-анимации: большой разбор

Внутренний стиль (Internal CSS)

Добавляется внутри HTML-документа, в секции <head>, в блоке <style>. Используется, если нужно оформить сразу несколько элементов на странице:

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
    img {
      width: 300px;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <p>Этот текст синий</p>
  <img src="photo.jpg" alt="Пример изображения">
</body>

Такой способ удобен, когда стили нужны только для одной страницы и нет смысла выносить их в отдельный файл. Код получается чище, чем с inline-стилями, и его проще редактировать. Мы так делали на заре «Кода», когда пилили простые проекты.

Но если страниц много, внутренние стили становятся неудобными, поскольку приходится дублировать код в каждом файле. Кроме того, они загромождают HTML-разметку.

База по вёрстке: основы HTML

Внешний стиль (External CSS)

Это — классика и база. Самый удобный и правильный способ — подключение CSS из отдельного файла с помощью <link>:

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

Стили элементов хранятся в отдельном файле, а в случае правок изменения применяются сразу на всех страницах. Такой метод позволяет разделить структуру (HTML) и оформление (CSS), что делает код чистым и удобным.

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

Импортируем стили с использованием @import

Кроме стандартного <link> можно подключить CSS-файл через директиву @import. Допустим, если у нас есть основной файл style.css, тогда можно импортировать в него другой файл:

/* Подключаем сброс стилей */
@import url("reset.css"); 
/* Подключаем тему оформления */
@import url("theme.css");

А если используем внутренний CSS, то можно импортировать стили прямо в HTML:

<style>
  @import url("style.css");
  body {
    background-color: lightgray;
  }
</style>

@import удобен, когда нужно разделить стили на несколько файлов, но подключать их все через один главный CSS-файл. Например, если у нас есть базовые стили (reset.css), стили для темы (theme.css) и отдельные стили для компонентов (buttons.css), их можно импортировать в основной style.css, а затем подключать только его.

Зачем нужны переменные в CSS

Также @import часто используется в CMS и препроцессорах, где стили генерируются автоматически и вручную подключать файлы не нужно.

За что ты послал нам препроцессоры? Чем мы тебя прогневали?

Атрибуты тега link для подключения CSS

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

Атрибут rel

Атрибут rel (relationship) указывает, что за файл мы подключаем. Для CSS всегда используем "stylesheet":

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

Так мы говорим браузеру, что это файл со стилями — если не прописать этот атрибут, то CSS просто не загрузится.

Атрибут type

Раньше в link обязательно указывали type="text/css", но современные браузеры понимают, что это CSS, и без него.

<!-- Так нужно было раньше -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Сейчас можно просто так -->
<link rel="stylesheet" href="style.css">

Атрибут href

Атрибут href указывает, где находится CSS-файл, то есть путь к нему. Путь может быть относительным и абсолютным.

Линкуй, сокращай. Как работают сокращатели ссылок

Относительный путь — если файл со стилями находится в той же папке, что и HTML-документ, или во вложенной папке внутри проекта:

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

Абсолютный путь — если файл на другом сервере. Тогда мы прописываем полный URL, как в строке браузера:

<link rel="stylesheet" href="https://styles.com/style.css">

Приоритеты стилей CSS

Когда на страницу подключается несколько источников стилей (inline, internal, external), браузер решает, какие из них применить, исходя из их приоритета.

Порядок приоритета от меньшего к большему такой:

Сброс стилей (@import в файлах CSS).
Внешний CSS (через <link> в <head>).
Внутренний CSS (в <style> в <head>).
Встроенные (inline) стили (style="..." в HTML).
CSS с !important — перебивает всё.

Внешние файлы (<link>) загружаются первыми и служат базовыми стилями. Если внутри HTML есть <style>, он перебивает внешний CSS, а inline-стили (style="...") имеют ещё более высокий приоритет и заменяют всё, что было до них.

Если в каком-то правиле стоит !important, оно игнорирует всю эту иерархию и применяется вне зависимости от других источников стилей. Поэтому !important нужно использовать очень осторожно, чтобы не нарушить предсказуемость кода.

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

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

Ещё больше полезных CSS-команд

Подключить внешний файл CSS через <link>.
Добавить стили прямо в коде через <style>.

Для подключения внешнего файла создают элемент <link> и добавляют его в <head>. Это удобно, если стили загружаются только в нужный момент, например при смене темы:

// Создаём новый элемент <link> для подключения CSS
const link = document.createElement("link");
// Указываем, что этот файл — таблица стилей
link.rel = "stylesheet";
// Задаём путь к CSS-файлу, который хотим подключить
link.href = "dark-theme.css";
// Добавляем созданный <link> в <head>, чтобы стили применились
document.head.appendChild(link);

Так браузер подгрузит dark-theme.css только тогда, когда это действительно нужно.

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

// Функция для включения тёмной темы
function applyDarkTheme() {
  // Создаём новый элемент <style>
  const style = document.createElement("style");
  // Записываем в него CSS-код для изменения фона и цвета текста
  style.innerHTML = "body { background-color: black; color: white; }";
  // Добавляем созданный <style> в <head>, чтобы стили применились
  document.head.appendChild(style);
}
// Вызываем функцию — тёмная тема включится
applyDarkTheme();

Подключение чужих CSS-стилей

Часто в проектах нужно использовать чужие стили — шрифты, иконки или CSS-библиотеки (Bootstrap, Tailwind, Normalize.css). Сторонние стили точно так же можно подключать через <link> или @import в своём CSS:

Одной строкой: новые CSS-команды для фронтендов

Через <link>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

Через @import в CSS:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

Сравнение всех способов подключения CSS

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

Для глобального оформления — внешний CSS (<link>).
Для быстрых изменений — внутренний CSS (<style>).
Для динамического изменения стилей — JavaScript.
Для подключения шрифтов и библиотек — @import или <link>.

В реальных проектах обычно комбинируют несколько методов, используя внешний CSS как основной, а JavaScript — для динамических изменений.

Текст:

Кристина Тульцева

Редактор:

Михаил Полянин

Обложка:

Алексей Сухов

Корректор:

Елена Грицун

Вёрстка:

Мария Климентьева

Соцсети:

Юлия Зубарева