Як працювати з CSS
Навчіться створювати CSS-правила за допомогою селекторів, властивостей і значень.
Як працювати з CSS
Кожному HTML-тегу відповідає CSS-селектор. За допомогою селекторів ми можемо звертатися до елементів сторінки та змінювати їхній вигляд.
Наприклад, якщо у HTML є абзаци p, то CSS-селектор p дозволяє змінити стиль усіх абзаців одразу.
Структура CSS-правила
селектор {
властивість: значення;
}CSS-правило складається із селектора та блоку стилів у фігурних дужках. Всередині записуються властивості та їх значення.
| Частина | Приклад |
|---|---|
| Селектор | p |
| Властивість | color |
| Значення | red |
Приклад CSS
p {
color: red;
}Це правило знайде всі абзаци p на сторінці та змінить колір їхнього тексту на червоний.
Декілька властивостей одночасно
p {
color: red;
font-size: 20px;
}Один селектор може містити багато CSS-властивостей. Кожне правило завершується крапкою з комою.
- Селектор визначає, до яких HTML-елементів застосувати стиль.
- Властивість визначає, що саме змінюємо.
- Значення визначає результат зміни.
- Кожен CSS-рядок закінчується крапкою з комою.
Один CSS-селектор може змінити сотні однакових елементів на сторінці. У цьому і полягає головна сила CSS.
- Відкрийте файл styles.css.
- Додайте правило для всіх тегів p.
- Змініть колір абзаців на червоний.
- Перевірте результат у браузері.
💡 Показати підказку
Використайте селектор p і властивість color зі значенням red.
✅ Показати відповідь
styles.css:
p {
color: red;
}