Оригінальна публікація: How to Change Text Color in HTML – Font Style Tutorial

Текст відіграє важливу роль на вебсторінках, оскільки допомагає користувачам зрозуміти її суть.

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

Наприклад, фон вашого вебсайту має темний колір. У такому випадку ви захочете зробити колір тексту світлішим і яскравішим, щоб покращити читабельність і доступність вашого вебсайту.

У цій статті ви дізнаєтеся, як змінити колір тексту в HTML. Ми розглянемо різні методи та обговоримо, який метод найкращий.

Як змінювали колір тексту до HTML5

До випуску HTML5, щоб додати текст на вебсайт, використовували тег <font>. Цей тег приймав атрибут color, який отримував колір у вигляді назви або значення шістнадцяткового коду:

<font color="#9900FF"> Ласкаво просимо до freeCodeCamp. </font>

// Або

<font color="green"> Ласкаво просимо до freeCodeCamp. </font>

З появою HTML5 цей тег втратив свою цінність. Це логічно, оскільки HTML є мовою програмування для розмітки вебсайту, а не мовою стилю. Коли виникає питання зі стилю, краще використовувати CSS, головною функцією якого є стилізація.

Це означає, що для того, щоб додати колір вебсторінці, потрібно використовувати CSS.

Якщо ви поспішаєте дізнатися, як змінити колір тексту за допомогою CSS, то ось як це зробити:

// Використовуючи вбудований CSS
<h1 style="color: value;"> Ласкаво просимо до freeCodeCamp! </h1>

// Використовуючи зовнішній/внутрішній CSS
selector {
    color: value;
}

Припустимо, ви нікуди не поспішаєте. Зануримось в деталі.

Як змінити колір тексту в HTML

Ви можете використати властивість color в CSS, щоб змінити колір тексту. Ця властивість приймає такі значення кольорів: шістнадцяткові коди, RGB, HSL або назви кольорів.

Наприклад, якщо ви хочете змінити колір тексту на блакитний, можете скористатися назвою skyblue, шістнадцятковим кодом #87CEEB, десятковим кодом RGB rgb(135,206,235) або значенням HSL hsl(197, 71%, 73%).

Змінити колір тексту за допомогою CSS можна трьома способами, використовуючи вбудований, внутрішній або зовнішній стиль.

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

Вбудований CSS дозволяє використовувати стиль напряму в елементі HTML. Це означає, що ви безпосередньо додаєте CSS у тег HTML.

Ви можете використати атрибут style, який містить усі стилі, які ви бажаєте застосувати до цього тегу.

<p style="...">Ласкаво просимо до freeCodeCamp!</p>

Для цього ви використовуватимете властивість color разом із бажаним значенням кольору:

// Назва кольору
<p style="color: skyblue">Ласкаво просимо до freeCodeCamp!</p>

// Шістнадцятковий код
<p style="color: #87CEEB">Ласкаво просимо до freeCodeCamp!</p>

// Код RGB
<p style="color: rgb(135,206,235)">Ласкаво просимо до freeCodeCamp!</p>

// Значення HSL
<p style="color: hsl(197, 71%, 73%)">Ласкаво просимо до freeCodeCamp!</p>

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

Як змінити колір тексту в HTML за допомогою внутрішнього або зовнішнього CSS

Інший бажаний спосіб змінити колір тексту — використати внутрішні або зовнішні стилі. Вони досить схожі, оскільки обидва використовують селектор.

Для внутрішнього стилю це виконується в тегу <head> файлу HTML. У тег <head> ви додаєте тег <style> і розміщуєте там всі свої стилі CSS, як показано нижче:

<!DOCTYPE html>
<html>
  <head>
    <style>
      selector {
        color: value;
      }
    </style>
  </head>

  // ...

</html>

У той час як для зовнішніх стилів все, що вам потрібно зробити — додати стиль CSS до файлу CSS, використовуючи загальний синтаксис:

selector {
  color: value;
}

Селектор може бути як тегом HTML, так і class або ID. Наприклад:

// HTML
<p> Welcome to freeCodeCamp! </p>

// CSS
p {
  color: skyblue;
}

Або використовуючи class:

// HTML
<p class="my-paragraph" > Welcome to freeCodeCamp! </p>

// CSS
.my-paragraph {
   color: skyblue;
}

Або використовуючи id:

// HTML
<p id="my-paragraph" > Welcome to freeCodeCamp! </p>

// CSS
#my-paragraph {
   color: skyblue;
}

Примітка: як ви бачили раніше, у вбудованому CSS можна використовувати назву кольору, шістнадцятковий код, RGB і значення HSL із внутрішнім або зовнішнім стилем.

Підсумок

У цій статті ви дізналися, як змінити колір шрифту/тексту елемента HTML за допомогою CSS. Ви також дізналися, як це робили розробники до появи HTML5 за допомогою тегу <font> і атрибутів кольору.

Крім того, майте на увазі, що стилізація елементів HTML за допомогою внутрішнього або зовнішнього стилю завжди краща за стилізацію за допомогою вбудованого стилю. Причина в тому, що такий спосіб забезпечує більшу гнучкість.

Наприклад, замість того, щоб додавати подібні вбудовані стилі до всіх елементів тегу <p>, можна використати один CSS-клас для всіх.

Вбудовані стилі не вважаються найкращою практикою, оскільки вони призводять до великої кількості однотипних записів, і ви не можете повторно використовувати стилі в іншому місці. Щоб дізнатись більше, див. мою статтю про вбудований стиль в HTML. Ви також можете дізнатись про те, як змінити розмір тексту і колір фону в цих статтях.

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

Щасливого програмування!

Вирушайте в подорож навчання! Перегляньте понад 200 експертних статей про веброзробку. Перегляньте мій блог, щоб отримати більше цікавого контенту від мене.