::first-letter
Styles the first letter of a block's first line — for drop caps.
Syntax
selector::first-letter { … }Examples
A drop cap:
<style>
.story::first-letter {
float: left;
font-size: 3em;
line-height: 1;
margin-right: 6px;
color: firebrick;
}
</style>
<p class="story">Once upon a time there was a small town by the sea, where every house was painted a different color and every street led to the harbour.</p>Notes
Works only on block-level elements. Only some properties are allowed: fonts, colors, margins, float and a few others.
See also
- ::first-line — Styles the first rendered line of a block — however many words fit on it.
- float — Pushes an element to the left or right edge so that text flows around it.
- font-size — The size of the font.
Related recipes
In the tutorial
- Pseudo-elements — How to style part of an element or add decorative content — before, after, first-letter, marker, placeholder and selection.