Існують кілька способів підключення стилів CSS до HTML-сторінки:
1. Зовнішні стилі
Застосовуються за допомогою елемента <link>, який повинен розташовуватися всередині елемента <head>.
<head>
...
<link rel="stylesheet" type="text/css" href="styles.css">
...
</head>
Зустрівши в HTML-документі цей тег, браузер завантажить із сайту CSS-файл і застосує стилі, що містяться в ньому. Шлях до файлу вказують в атрибуті href (у нашому випадку це styles.css).
Такий підхід зручний тим, що спільні для декількох документів стилі можна винести в окремий файл і додавати їх тегом <link>, не дублюючи один і той же CSS-код в кожному з цих документів.
2. Таблиці стилів документу
Називаються так тому, що розташовуються безпосередньо в HTML-документі і застосовуються лише до нього. CSS-стилі та коментарі розташовуються між тегами, що відкривають і закривають елемент <style> :
<style type="text/css">
...
p {
color: #333333;
text-align: justify;
}
...
</style>
Зазвичай тег <style> розміщують всередині елементу <head>, хоча він може знаходитися в будь-якій частині документу.
3. Inline-стилі
Якщо необхідно задати стиль певному елементу на сторінці, не застосовуючи зовнішніх стилів і елемента style, можна скористатись атрибутом style цього елементу:
<p style="color: red">Абзац з літерами червоного кольору</p>
Всередині атрибуту style можна вказати декілька CSS-правил, які слід розділити крапкою з комою.
<p style="color: blue; font-weight: bold">...</p>
Атрибут style є майже у всіх HTML-елементів, окрім тих, що розташовуються поза елементом <body>.
4. Правило @import
Правило @import дозволяє імпортувати (завантажити) вміст CSS-файлу в поточну стильову таблицю.
<style type="text/css">
@import url(styles/reset.css);
@import url(styles/form.css);
...
p {
color: #333333;
text-align: justify;
}
...
</style>
Підключення стилів у моїй роботі:
Під час розробки мого веб-додатка я використовувала метод підключення стилів за допомогою тегу <link>. Для цього я створила окремий файл з розширенням .css, де оформила всі необхідні стилі для моїх елементів. Після цього я додала тег <link> у розділ <head> мого HTML-документа і вказала шлях до мого файлу зі стилями у атрибуті href. Цей метод дозволив мені зберігати стилі в окремому файлі, що полегшило їх керування і редагування, а також підвищило читабельність коду моєї веб-сторінки.
<link rel="stylesheet" href="../css/style.css">