#2 - Формати підключення стилів

Переваги CSS очевидні, оскільки він дозволяє оформляти сайти: з негарної HTML розмітки перетворювати все на відмінні веб сайти з сучасним дизайном. 

CSS дозволяє додавати не тільки стилі для блоків, але також дозволяє створювати анімацію, що може програватися при завантаженні сторінки або при наведенні миші на об'єкт.

Для розуміння можливостей CSS пропонуємо переглянути наш урок з CSS анімації:

Спосіб підключення CSS

Усього існує 3 способи, що дозволяють записувати стилі для HTML об'єктів. Кожен спосіб варто застосовувати у певних випадках. 

Атрибут style

Якщо вам необхідно записати невеликі стилі для окремого HTML об'єкта, то можна скористатися простим атрибутом style. У ньому можна розміщувати CSS стилі, які будуть використані саме для того об'єкта, у якого ми прописали цей атрибут. Додавати таким чином стилі для всіх об'єктів окремо дуже погана витівка. Ваш код стане зовсім не зручним для читання, а завантаження сторінки зросте в рази. Подібний спосіб варто застосовувати лише у особливих випадках для одного-двох елементів на сторінці.

Тег style

Другий спосіб дозволяє записувати стилі для багатьох елементів. Це спосіб написання стилів у тегу style. Ось приклад такого запису:

<style>
	якісь CSS стилі
</style>

Спосіб досить хороший, але його також варто використовувати у поодиноких випадках. Наприклад, якщо потрібно додати стилі, які будуть лише на цій сторінці і ніде більше. При цьому, якщо стилів багато, краще скористатися третім варіантом, який здатний відмежувати стилі від HTML файлу, що дозволяє створювати сайти з чистим кодом, легким для читання.

Окремий CSS файл

Третій варіант. Він дозволяє створити окремий файл з розширенням .css і підключити його до веб-сторінки за допомогою спеціального тегу в шапці сайту - head:

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

Цей варіант є найкращим, оскільки дозволяє відокремлювати стилі від HTML документа, що не тільки покращить час завантаження сайту, але також покращить читання коду загалом.