# CSS Initial Letter

The `initial-letter` property specifies the size of the initial letter of a block of text (a drop cap) and the number of lines it should sink into the text.

## 1. The Concept

Traditionally, creating drop caps on the web involved using `float`, `font-size`, and `line-height` hacks, which were fragile and difficult to align perfectly. `initial-letter` solves this by handling the alignment and sizing automatically.

## 2. Syntax

```css
initial-letter: <size> [ <sink> ];
```

*   **`<size>`**: The height of the letter, expressed in the number of lines it should occupy.
*   **`<sink>`**: (Optional) The number of lines the letter should sink into the text. If omitted, it defaults to the size value.

## 3. Basic Usage

To create a standard drop cap that is 3 lines tall:

```css
p::first-letter {
  initial-letter: 3;
  /* Optional styling */
  font-weight: bold;
  margin-right: 0.5em;
  color: darkred;
}
```

## 4. Advanced Usage (Size vs Sink)

You can make the letter taller than the space it occupies (a "raised cap") or shorter.

```css
/* 3 lines tall, but only sinks 2 lines deep */
p::first-letter {
  initial-letter: 3 2;
}
```

## 5. Browser Support

Support for `initial-letter` is growing but still requires prefixes in some browsers.
*   **Chrome/Edge:** Supported (v110+).
*   **Safari:** Supported as `-webkit-initial-letter`.
*   **Firefox:** Not supported yet (as of late 2023).

[[programming/css/css]]
[[programming/css/pseudo-classes-and-pseudo-elements]]
[[programming/css/typography]]