Чтобы изменить цвет первой буквы текста с помощью CSS, вы можете использовать псевдоэлемент ::first-letter. Вот несколько способов добиться такого эффекта:

1. Метод 1: использование псевдоэлемента ::first-letter непосредственно в CSS:

   p::first-letter {
   color: red;
   }

   Цвет первой буквы во всех элементах

   изменится на красный.

2. Метод 2. Использование селектора класса или идентификатора:

   .initial-letter::first-letter {
   color: blue;
   }

   В вашем HTML вы должны присвоить класс «initial-letter» элементу, первую букву которого вы хотите стилизовать.

3. Метод 3. Использование элемента span:

   <p><span class="initial-letter">T</span>his is a paragraph.</p>

   .initial-letter {
   color: green;
   }

   В этом методе вы помещаете первую букву в элемент и применяете нужный цвет с помощью CSS.

4. Метод 4. Использование JavaScript:

   <p id="text">This is a paragraph.</p>

   const textElement = document.getElementById('text');
   const firstLetter = textElement.innerText[0];
   textElement.innerHTML = `<span >${firstLetter}</span>${textElement.innerText.slice(1)}`;

   Этот код JavaScript извлекает текстовое содержимое, помещает первую букву в элемент и устанавливает нужный цвет.