CSS initial-letter Property

The initial-letter property specifies the first letter and the number of lines it occupies.

This property appears in newspapers where the first letter is larger than the rest of the content.

This property has three values: normal, <number>, <integer>.

Negative values are not allowed.

Only Safari supports this property.

Initial Value	normal
Applies to	::first-letter pseudo-elements and inline-level first child of a block container.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	Object.style.initialLetter = "<number>";

Syntax

initial-letter: normal | <number> | <integer>;

Example of the initial-letter property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Slabo 27px';
        font-size: 1.5em;
        line-height: 1.5;
        padding: 40px 0;
      }
      article {
        width: 80%;
      }
      .example::first-letter {
        -webkit-initial-letter: 2;
        initial-letter: 1;
        color: #8ebf42;
        font-weight: bold;
        margin-right: .60em;
      }
    </style>
  </head>
  <body>
    <article class="example">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </article>
  </body>
</html>

Try it Yourself »

Result

Values

Value	Description
normal	No initial-letter effect. This is the default value of this property.
<number>	Specifies the size of the initial letter, how many lines it occupies. Negative values are not allowed.
<integer>	Specifies how many lines the initial letter should sink.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.

Browser support


✕	✕	✕	9.0 partial	✕

Practice Your Knowledge

What is the purpose of the CSS 'initial-letter' property?

It is used to set a specific style for punctuation in a text.

It is used to create a drop cap or raised cap effect on the first letter of a paragraph.

It is used to align text vertically within a line.

It is used to set the initial letter's size and type of alignment, allowing it to be raised or sunk.

It is used to set the font size of a paragraph.

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

CSS Basics

❮ Prev Next ❯

Do you find this helpful?