Каскадні таблиці стилів (CSS) є незамінним інструментом розробки веб-сторінок. Вони дозволяють розділити стиль та оформлення від вмісту веб-сторінки, що дозволяє розробникам легко змінювати зовнішній вигляд та форматування без необхідності змінювати HTML-код.
Мова CSS надає велику кількість можливостей для зміни шрифтів, кольорів, розмірів, відступів, полів та інших атрибутів HTML-елементів. Він дозволяє створювати красиві та функціональні веб-сторінки, які залишаться зрозумілими та зручними для користувачів.
Щоб застосувати стилі CSS до HTML, необхідно задати селектори, властивості та значення. Sелектори вибирають елементи HTML, до яких потрібно застосувати стилі. Властивості визначають, які атрибути елементів змінювати. Значення визначають конкретне значення властивостей CSS.
| Селектор | Опис | приклад |
|---|---|---|
| id-селектор | Застосовується до елемента із зазначеним ідентифікатором | # my-element { color: blue; } |
| клас-селектор | Застосовується до всіх елементів із зазначеним класом | .my-class { font-size: 16px; } |
| елемент-селектор | Застосовується до всіх елементів зазначеного типу | p {text-align: center; } |
| нащадок-селектор | Застосовується до елемента, що є нащадком зазначеного елемента | div p {color: red; } |
| сусідній селектор | Застосовується до елемента безпосередньо після зазначеного елемента | h2 + p { font-weight: bold; } |
| атрибут-селектор | Застосовується до елементів, які мають зазначений атрибут. | input[type="text"] { background-color: yellow; } |
| псевдоклас-селектор | Застосовується до елементів у певному стані чи позиції | a:hover { color: purple; } |
| псевдоелемент-селектор | Застосовується до певної частини елемента | p::first-letter { font-size: 24px; } |
Як зробити CSS у HTML?
Можна написати їх прямо в HTML у тезі <style> . Можна підключити зовнішній файл CSS. Можна встановити стилі за допомогою JavaScript або оформити окремий елемент за допомогою інлайн-стилів. Писати стилі сьогодні прийнято в окремому файлі CSS і потім підключати його за допомогою тега <link> .
Як підключити CSS до HTML?
Щоб підключити CSS файл до HTML сторінки, у тезі head слід написати таку конструкцію: <linkrel="stylesheet" href="путь к CSS файлу">. Сам CSS файл має бути з розширенням.
Як прописати стиль усередині тега?
Прописати будь-який стиль елементу в HTML ви можете трьома способами:
- Використовуйте зовнішній файл стилів. Потрібно вказати посилання на цей файл тезі link HTML-документу.
- За допомогою опису стилів в атрибуті style HTML-елемента. …
- Через елемент style у розділі head HTML-документа.