Верстка

Як задати колір тексту в CSS – змінюємо колір тексту за допомогою стилів

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

Відповідь на питання

Відповідь на питання “Як змінити колір тексту в CSS” досить проста – за допомогою властивості color. Достатньо задати потрібному селектору (елементу, класу, айді і т.і.) властивість color з певним значенням. Найчастіше на практиці це виглядає так:

p {
  color: #ffffff;
}

Ось так ми задали білий колір тексту для всіх блоків <p>.

Різні формати

На що варто звернути увагу – колір можна вказувати у різних форматах.

Наприклад, замість #ffffff – ви можете прописати white і колір все також буде білим. Або замість шести символів f прописати лише три – все одно працюватиме. Ще можете вказати колір за допомогою системи RGB. Це коли ви змішуєте три кольори (червоний, зелений та синій), щоб отримати один. Тоді формат буде ось такий:

p {
  color: rgb(255,255,255);
}

Колір такий самий білий.

Як задати прозорість тексту

Щоб встановити прозорість для тексту, достатньо скористатися розширеною версією rgb – rgba. Тут ми четвертим параметром задаємо прозорість (від 0 до 1). Ось, для наочності, зробимо чорний текст трохи прозорим:

p {
  color: rgba(0,0,0,0.5);
}

Сподіваємося, що ви отримали відповідь на своє запитання і тепер можете без проблем змінити колір тексту на вашому сайті.

Стаття була корисною?
👍
Так - 5
👎
Ні - 6
Рекомендуємо до прочитання
Як вставити відео з YouTube в HTML
Плавне підкреслення посилання при наведенні на чистому CSS
Як зробити ефект натискання кнопки на CSS
💬Коментарі:

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Перейти до Telegram
Наш рейтинг
🏆Найкращий хостинг для сайту
1
Ukraine
9/10
2
HostPro
8/10
3
TutHost
8/10
4
Hostiq
8/10
5
Cityhost
8/10
6
Freehost
7/10
7
UAhosting
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 56398
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 42569
Поява елементів при скролі
Переглядів: 41849
Як змінити колір SVG у CSS
Переглядів: 29072
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 25881
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили: 

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
10px
20px
30px
Viva Magenta
🤔Колір 2023 року
Дослідницький інститут Pantone обрав головний колір 2023 року. Ним став карміново-червоний відтінок із фіолетовим підтоном, який назвали Viva Magenta.
#bb2649