Урок 4 із 104
4%
← Назад

Перша літера в CSS

Вивчаємо псевдоелемент ::first-letter, який дозволяє оформити першу літеру тексту окремо від решти абзацу.

Перша літера в CSS

Псевдоелемент ::first-letter використовується для стилізації лише першої літери тексту. Його часто застосовують для створення декоративних великих літер на початку статей або книг.

Псевдоелемент ::first-letter

Після селектора додається ::first-letter, а всередині фігурних дужок записуються стилі, які будуть застосовані лише до першої літери.


p::first-letter {
  font-size: 40px;
  font-weight: bold;
  color: red;
}

<p>
  Це приклад абзацу, у якому перша літера буде оформлена окремо.
</p>
❗ Важливо:

Псевдоелемент ::first-letter працює лише з першою літерою текстового вмісту елемента. До неї можна застосовувати більшість текстових властивостей CSS.

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

📌 Завдання:
  1. №1. Відкрийте приклад.
  2. №2. Оформіть першу літеру тексту за допомогою псевдоелемента ::first-letter.
💡 Показати підказку

Використайте селектор p::first-letter і змініть, наприклад, розмір шрифту, колір або жирність першої літери.

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

p::first-letter {
  font-size: 40px;
  font-weight: bold;
  color: red;
}