Как оформить первую букву абзаца

Короткий ответ

Псевдоэлемент ::first-letter выбирает первую букву блока:

<style>
  .story::first-letter { float: left; font-size: 3.2em; line-height: 0.8; margin: 4px 6px 0 0; color: crimson; font-weight: 700; }
</style>
 
<p class="story">Once upon a time there was a small town by the sea. Every morning the fishermen went out before sunrise and came back with their boats full.</p>

float: left позволяет тексту обтекать большую букву справа — получается буквица, как в книгах.

Современный способ

initial-letter сам рассчитывает размер буквы на заданное число строк, без подбора font-size и отступов:

.story::first-letter { initial-letter: 3; margin-right: 6px; }

Свойство поддерживают ещё не все браузеры, поэтому вариант с float пока надёжнее.

Первая строка

::first-line оформляет первую строку, и сколько в ней слов, зависит от ширины экрана:

<style>
  .intro::first-line { font-variant: small-caps; font-weight: 600; }
</style>
 
<p class="intro" style="width: 260px;">The first line of this paragraph is styled differently from the rest of the text.</p>

Частая ошибка

::first-letter не работает у строчных элементов, например у span, — только у блоков, элементов списка и ячеек таблицы. Если буквица не появляется, проверьте, что правило стоит на блоке.