Як вставити CSS у HTML: 3 способи додати CSS у HTML

🗓️ Оновлено: 09.08.2022
💬Коментарів: 0
👁️Переглядів: 722

Ви можете по-різному додати 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 код. Проте ми їх не розглядатимемо.

Який спосіб виберете ви – залежить від ваших завдань. Усі три мають право на існування та можуть бути застосовані в тій чи іншій ситуації.

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Стаття була корисною?
👍
Так - 3
👎
Ні - 0
💬Коментарі:

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 18273
Поява елементів при скролі
Переглядів: 16834
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 6943
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 6783
Як зробити ефект натискання кнопки на CSS
Переглядів: 6205
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Колір 2022 року
Інститут кольору Pantone оголосив цвіт 2022 року. Це бузковий відтінок під назвою 17-3938 Very Peri.
#6667ab