Як вставити CSS у HTML: 3 способи додати CSS у HTML
Ви можете по-різному додати css до вашого html-файлу. Є швидкі варіанти, правильні. Ми розглянемо усі можливі.
1. Підключення зовнішнього файлу
Найпоширеніший і найправильніший варіант – це просто підключити зовнішній файл CSS.
Це робиться всередині тега <head> за допомогою тега link.
<link href="css/styles.css" rel="stylesheet">Які переваги цього способу? По-перше, це просто зручно. Усі ваші стилі будуть лежати в окремому файлі. Не загубиться, як мінімум. Та й редагувати можна без втручання у html. По-друге, ви зможете цей файл закешувати та прискорити завантаження вашого сайту.
Часте питання: що робити, якщо файл index.html лежить не докорінно, а в окремій папці – як тоді підключити стилі?
Відповідь проста: потрібно прописати правильний шлях до файлу styles.css. Припустимо ваш файл styles.css знаходиться у папці css, а index.html у папці templates. Тоді всередині тега <head> в html підключаєте стилі таким чином:
<link rel="stylesheet" href="../css/styles.css">Тут ви, як би, піднялися на один рівень вгору за допомогою цих символів: “../”. Якщо потрібно піднятися на два рівні вгору, то пишіть так: “../../”
2. Внутрішні стилі
Внутрішні стилі можна написати для конкретної html-сторінки. Ви не підключаєте файл, як у попередньому прикладі, а вставляєте css код прямо всередину HTML. Але робите це із двома правилами.
Перше правило: вставляйте усередині тега <head>
Друге правило: вставляйте css стилі всередині тега <style></style>
Таким чином у вас повинен вийти такий код:
<style>
body {
background-color: #cccccc;
}
h1 {
font-size: 26px;
color: #eeeeee;
}
</style>І все це потрібно вставити всередині тега <head>.
Для чого так роблять? Можливо, у вас немає доступу до редагування файлів css, або ви хочете, щоб новий css код спрацьовував тільки на цій сторінці, а можливо, ви не хочете чекати, коли завантажиться файл styles.css і вставляєте css код прямо в html сторінку. Почасти це прискорить завантаження сторінки, однак такий підхід ускладнює підтримувати та редагувати сайт надалі.
Якщо ви вставляєте css код через <style></style> на сторінці, наприклад, contact.html, ці стилі будуть дійсні тільки на цій конкретній сторінці. На сторінці about.html вони вже не працюватимуть.
3. Вбудовані стилі
Вбудовані стилі встановлюються для конкретного елемента через атрибут style. Давайте одразу покажемо, як це виглядає. Припустимо, у вас є заголовок h1 і ви хочете змінити розмір шрифту і розмістити текст по центру блоку. Тоді прописуємо ось так:
<h1 style="font-size: 28px; text-align: center;">Заголовок сторінки</h1>Таким чином ці стилі будуть застосовані до цього елемента. Інші H1 будуть без змін, тому що ми вбудували інлайнові стилі тільки для конкретно цього заголовка.
Одна з переваг такого методу, це те, що інлайнові стилі перекривають стилі прописані в css файлі. Тобто вони вважаються вагомішими.
Є ще кілька “екзотичних” методів вставки css у html код. Проте ми їх не розглядатимемо.
Який спосіб виберете ви – залежить від ваших завдань. Усі три мають право на існування та можуть бути застосовані в тій чи іншій ситуації.
