How to style the first letter

Short answer

The ::first-letter pseudo-element selects the first letter of a block:

<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 lets the text wrap around the large letter on the right — a drop cap, like in books.

The modern way

initial-letter works out the letter size for a given number of lines by itself, with no tuning of font-size and margins:

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

Not every browser supports it yet, so the float variant is still more reliable.

The first line

::first-line styles the first line, and how many words it holds depends on the screen width:

<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>

Common mistake

::first-letter does not work on inline elements such as span — only on blocks, list items and table cells. If the drop cap does not show up, check that the rule is on a block.