> For the complete documentation index, see [llms.txt](https://vyspiansky.gitbook.io/introduction-to-web-development/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vyspiansky.gitbook.io/introduction-to-web-development/css/adding-css-to-html.md).
# Додавання CSS до HTML-документу
Для того, щоб застосувати стилі до HTML-документу, ми можемо обрати один з чотирьох способів, або ж комбінувати їх:
* застосувати зовнішні стилі за допомогою елемента `link`;
* додати CSS-блок за допомогою елемента `style`;
* вказати стиль конкретному HTML-елементу за допомогою HTML-атрибуту `style` (т.з. inline-стилі);
* використати `@import`.
### Зовнішні стилі
Застосовуються за допомогою **елемента `link`**, який повинен розташовуватися всередині елемента `head`.
```markup
...
...
```
Зустрівши в HTML-документі цей тег, браузер завантажить із сайту CSS-файл і застосує стилі, що містяться в ньому. Шлях до файлу вказують в атрибуті **`href`** (у нашому випадку це `styles.css`).
Такий підхід зручний тим, що спільні для декількох документів стилі можна винести в окремий файл і додавати їх тегом `link`, не дублюючи один і той же CSS-код в кожному з цих документів.
### Таблиці стилів документу
Називаються так тому, що розташовуються безпосередньо в HTML-документі і застосовуються лише до нього.
CSS-стилі та коментарі розташовуються між тегами, що відкривають і закривають **елемент `style`**:
```markup
```
Зазвичай тег `style` розміщують всередині елементу `head`, хоча він може знаходитися в будь-якій частині документу.
### Inline-стилі
Якщо необхідно задати стиль певному елементу на сторінці, не застосовуючи зовнішніх стилів і елемента `style`, можна скористатись **атрибутом `style`** цього елементу:
```markup
Абзац з літерами червоного кольору
```
Всередині атрибуту `style` можна вказати декілька CSS-правил, які слід розділити крапкою з комою.
```markup
...
```
Атрибут style є майже у всіх HTML-елементів, окрім тих, що розташовуються поза елементом `body`.
### Правило `@import`
Правило `@import` дозволяє імпортувати (завантажити) вміст CSS-файлу в поточну стильову таблицю.
{% hint style="warning" %}
`@import` не дозволено вставляти після будь-яких оголошень, крім `@charset` або іншого `@import`.
{% endhint %}
```markup
```