initial-letter
Quick Summary for initial-letter
initial-letter CSS property sets styling for dropped, raised, and sunken initial letters.
Code Usage for initial-letter
<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">initial-letter</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token comment">/ Numeric values /</span> <span class="token property">initial-letter</span><span class="token punctuation">:</span> 1.5<span class="token punctuation">;</span> <span class="token comment">/ Initial letter occupies 1.5 lines /</span> <span class="token property">initial-letter</span><span class="token punctuation">:</span> 3.0<span class="token punctuation">;</span> <span class="token comment">/ Initial letter occupies 3 lines /</span> <span class="token property">initial-letter</span><span class="token punctuation">:</span> 3.0 2<span class="token punctuation">;</span> <span class="token comment">/ Initial letter occupies 3 lines and sinks 2 lines /</span> <span class="token comment">/ Global values /</span> <span class="token property">initial-letter</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">initial-letter</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">initial-letter</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">initial-letter</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
More Details for initial-letter
initial-letter
The initial-letter CSS property sets styling for dropped, raised, and sunken initial letters.
/* Keyword values */ initial-letter: normal; /* Numeric values */ initial-letter: 1.5; /* Initial letter occupies 1.5 lines */ initial-letter: 3.0; /* Initial letter occupies 3 lines */ initial-letter: 3.0 2; /* Initial letter occupies 3 lines and sinks 2 lines */ /* Global values */ initial-letter: inherit; initial-letter: initial; initial-letter: revert; initial-letter: unset; Syntax
The keyword value normal, or a <number> optionally followed by an <integer>.
Values
normal No special initial-letter effect. Text behaves as normal.
<number> Defines the size of the initial letter, in terms of how many lines it occupies. Negative values are not allowed.
<integer> Defines the number of lines the initial letter should sink when the size of it is given. Values must be greater than zero. If omitted, it duplicates the size value, floored to the nearest positive whole number.
Formal definition
| Initial value | normal |
|---|---|
| Applies to | ::first-letter pseudo-elements and inline-level first child of a block container |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
normal | [ <number> <integer>? ]
Examples
Setting initial letter size
HTML<p class="normal">Initial letter is normal</p> <p class="onefive">Initial letter occupies 1.5 lines</p> <p class="three">Initial letter occupies 3 lines</p> .normal::first-letter { -webkit-initial-letter: normal; initial-letter: normal; } .onefive::first-letter { -webkit-initial-letter: 1.5; initial-letter: 1.5; } .three::first-letter { -webkit-initial-letter: 3.0; initial-letter: 3.0; } Specifications
| Specification |
|---|
| CSS Inline Layout Module Level 3 # sizing-drop-initials |
initial-letter-align Drop caps in CSS Last modified: Jan 19, 2022, by MDN contributors
Add Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
