Тег span для фрагментів тексту в HTML

Дізнаємося, навіщо потрібен тег span і як за допомогою CSS оформлювати окремі слова або частини тексту.

Тег span для фрагментів тексту в HTML

Ви вже знаєте, що для виділення тексту жирним використовується тег b. Але що робити, якщо потрібно змінити колір, розмір або інше оформлення лише одного слова чи невеликої частини тексту?

Для цього використовується тег span. Сам по собі він нічого не змінює, але до нього можна застосувати CSS-стилі.

Наприклад, маємо такий HTML-код:

<p>
  This is a paragraph with text.
</p>

Припустимо, потрібно зробити слово text червоним. Для цього обгорнемо його в тег span і призначимо клас.

<p>
  This is a paragraph with <span class="red">text</span>.
</p>

Тепер залишилося оформити цей клас у CSS.

.red {
  color: red;
}

❗ Важливо:

Тег span використовується для оформлення невеликих фрагментів тексту. Якщо потрібно оформити цілий блок, зазвичай використовують тег div.

Практичне завдання

📌 Завдання:

№1
Дано HTML-код:
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Зробіть елементи з класом xxx розміром 30px.

💡 Показати підказку

Зверніться до класу xxx за допомогою селектора класу та використайте властивість font-size.

✅ Показати відповідь

.xxx {
  font-size: 30px;
}