Внешняя таблица стилей CSS

Как подключить CSS-файл к HTML
Подключение стилей с помощью тега <link>
Подключение стилей с помощью директивы @import

Таблицы стилей бывают двух видов — внутренние и внешние — в зависимости от того, где определены стили: непосредственно на самой странице или во внешнем файле, связанном с веб-страницей.

Как подключить CSS-файл к HTML

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

Для добавления внешней таблицы стилей, вам нужно подключить её к HTML-документу с помощью элемента <link>, который должен располагаться внутри элемента <head>, или с помощью CSS-директивы @import.

Подключение стилей с помощью <link>

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

Элемент <link> может содержать три атрибута:

rel="stylesheet" — указывает тип ссылки (в данном случае это ссылка на таблицу стилей);
type="text/css" — указывает тип файла, на который ссылается элемент (необязательный атрибут, который может быть опущен);
href="styles.css" — определяет путь к внешнему CSS-файлу, который может отличаться в зависимости от того, где он находится.

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

Подключение стилей с помощью директивы @import

Для подключения внешнего CSS-файла с помощью директивы @import в HTML-коде используется элемент <style>:

<style>
  @import url(main.css);
</style>

После ключевого слова @import используется url(), в скобках указывается путь к внешнему CSS-файлу, который может быть заключен в кавычки: url("main.css");. Использование url() для указания пути к CSS-файлу необязательно, можно просто написать: @import "путь_к_файлу";, в этом случае путь обязательно должен быть указан в кавычках.

Используя директиву @import можно подключить любое количество внешних таблиц:

<style>
  @import url(main.css);
  @import url(каталог/main2.css);
</style>

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

<style>
  @import url(main.css);
  @import url(каталог/main2.css);
  p { color: red;}
</style>

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

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