Способы подключить CSS к странице

Разбираем три способа добавить стили на страницу и почему внешний файл — выбор по умолчанию.

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

1. Inline-стили (в атрибуте style)

Стиль можно написать прямо в элементе через атрибут style. Внутри пишут пары «свойство: значение», разделённые точкой с запятой.

<p style="color: red; font-size: 20px;">Важный текст</p>

Этот абзац станет красным и крупным. Способ простой, но плохой для постоянного использования: стиль привязан к одному элементу, его нельзя переиспользовать, а разметка превращается в кашу. Inline-стили оставляют для редких исключений и быстрых проверок.

2. Внутренние стили (тег style)

Можно собрать все правила в одном теге <style> внутри <head> страницы. Тогда стиль действует на всю страницу, а разметка остаётся чистой.

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

Теперь правило применится ко всем абзацам страницы сразу. Это удобно для маленькой одиночной страницы, но стили видны только на ней — на другой странице сайта их не будет.

3. Внешний файл (через link)

Лучший способ для настоящих сайтов: вынести все стили в отдельный файл, например styles.css, и подключить его в <head> тегом <link>.

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

А сам файл styles.css содержит только правила, без всякой разметки:

p {
  color: red;
  font-size: 20px;
}

Атрибут rel="stylesheet" говорит браузеру, что это таблица стилей, а href указывает путь к файлу. Один такой файл можно подключить ко всем страницам сайта — и оформление везде будет одинаковым. Поменяли цвет в одном месте — обновился весь сайт.

Что выбрать

Способ	Область действия	Когда
inline (`style`)	один элемент	почти никогда, только исключения
внутренний (`<style>`)	одна страница	крошечная одиночная страница
внешний (`<link>`)	весь сайт	выбор по умолчанию

Запомните правило: в реальных проектах используют внешний файл. Он держит разметку и стили раздельно — ровно то, ради чего CSS и придуман.

Итог

Inline-стиль в атрибуте style действует на один элемент — для исключений.
Тег <style> в <head> стилизует одну страницу целиком.
Внешний файл через <link rel="stylesheet"> — стандартный способ для всего сайта.