Як підключити CSS до HTML — одне з перших питань, яке виникає під час верстки сторінок. Саме CSS відповідає за вигляд сайту: кольори, відступи, шрифти, сітку та адаптивність.
Основні способи підключення CSS
Існує три поширені варіанти: зовнішній файл, внутрішній стиль у блоці <style> і inline-стилі через атрибут style. Найкращий вибір залежить від масштабу проєкту та зручності підтримки.
1. Зовнішній файл CSS
Це найпрактичніший спосіб для більшості сайтів. Ви створюєте окремий файл, наприклад style.css, і підключаєте його в секції <head>:
<link rel="stylesheet" href="style.css">
Такий підхід зручний тим, що стилі зберігаються окремо від HTML, код легше читати, а один файл можна використовувати для кількох сторінок.
2. Внутрішній CSS у тегу style
Якщо потрібно швидко оформити одну сторінку або протестувати ідею, стилі можна написати прямо в HTML:
<style>
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
}
</style>
Такий варіант підходить для невеликих макетів, але для великого сайту він менш зручний, бо стилі змішуються з розміткою.
3. Inline-стилі через атрибут style
Inline CSS застосовують до конкретного елемента:
<p style="color: blue;">Текст</p>
Це корисно для швидкого тесту або точкової правки, але зловживати таким способом не варто. Якщо стилів багато, код стає важким для підтримки.
Як правильно підключити CSS у head
У більшості випадків зовнішній файл підключають у <head>, щоб браузер міг завантажити стилі до відображення сторінки. Типова структура виглядає так:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Привіт</h1>
</body>
</html>
Якщо шлях до файлу неправильний, стилі не застосуються. Тому варто перевіряти папку, назву файлу та розширення.
На що звернути увагу під час підключення
- переконайтеся, що файл CSS збережений саме з розширенням .css;
- перевірте правильність шляху в атрибуті href;
- врахуйте регістр символів у назвах файлів, якщо сайт працює на сервері;
- не змішуйте зайвий CSS у HTML, якщо проєкт уже більший за кілька сторінок;
- використовуйте один основний файл стилів для повторного застосування.
Який спосіб обрати
Якщо ви вчите HTML і CSS або створюєте реальний сайт, найкраще почати із зовнішнього файлу. Це базовий і найзручніший підхід для більшості задач. Внутрішній CSS доречний для швидких тестів, а inline-стилі варто залишати лише для поодиноких випадків.
Отже, якщо коротко: найправильніша відповідь на питання як підключити css до html — через тег <link> у <head>, а інші способи використовувати лише тоді, коли це справді виправдано.
