initial-letter
Quick Summary for initial-letter
The
initial-letter
CSS property sets styling for dropped, raised, and sunken initial letters.
Code Usage for initial-letter
/* 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;
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>
CSS .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; }
ResultSpecifications
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
Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline