Як змінити колір тексту в HTML — одне з найчастіших запитань у тих, хто лише починає працювати з вебсторінками. Сам HTML майже не займається оформленням, тому для кольору тексту зазвичай використовують CSS.
Найпростіший спосіб: CSS властивість color
Щоб задати колір тексту, використовуйте властивість color. Вона працює для будь-якого текстового елемента: абзацу, заголовка, посилання чи блоку з текстом.
Приклад:
- HTML: <p class="note">Це текст</p>
- CSS: .note { color: #e11d48; }
У цьому прикладі текст стане рожево-червоним. Для значення можна використовувати назву кольору, HEX-код, RGB або HSL.
Inline-стиль: швидко, але не завжди зручно
Якщо потрібно змінити колір лише в одному місці, можна додати стиль прямо в тег:
<p style="color: blue;">Синій текст</p>
Такий варіант підходить для швидкого тесту або невеликої правки. Але якщо на сторінці багато елементів, краще винести стилі в окремий CSS-файл або хоча б у блок <style> у head.
Як змінити колір через клас
Найакуратніший підхід — створити клас і застосовувати його до потрібних елементів. Це зручно, коли ви хочете однаково оформити кілька блоків.
Приклад:
- <p class="success">Успішне повідомлення</p>
- .success { color: green; }
Такий спосіб полегшує підтримку сайту: якщо колір потрібно буде змінити пізніше, ви відредагуєте лише одне правило.
Поширені формати кольорів
У CSS для тексту найчастіше використовують такі значення:
- Назва кольору: red, black, white
- HEX: #ff0000, #222222
- RGB: rgb(255, 0, 0)
- HSL: hsl(0, 100%, 50%)
Для точного контролю дизайну зазвичай зручніші HEX або RGB, а для простих правок підійдуть і назви кольорів.
На що звернути увагу
Після зміни кольору перевірте контрастність. Світлий текст на світлому фоні або темний текст на темному фоні погано читається, особливо на мобільних екранах. Також пам’ятайте, що стилі можуть перекриватися: якщо колір не змінюється, перевірте, чи не має елемент інше CSS-правило з вищим пріоритетом.
Якщо ви працюєте з посиланнями, кнопками або текстом у складній верстці, краще використовувати класи та зовнішній CSS. Це робить код чистішим і допомагає уникати хаосу в розмітці.
Отже, як змінити колір тексту в HTML найкраще вирішується через CSS-властивість color. Для швидкого тесту підійде inline-стиль, але для нормальної верстки зручніше застосовувати класи та окремі правила стилів.
