W3docs
en
Log in

CSS initial-letter Property

Use initial-letter CSS property which allows to select the first letter and specify the number of lines it should occupy. Learn about property values and see examples.

The initial-letter property specifies the size of the first letter and the number of lines it drops and rises.

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

This property accepts the normal keyword or two space-separated <integer> values.

Info

Negative values are not allowed.

Info

Supported in all modern browsers.

Initial Valuenormal
Applies to::first-letter pseudo-elements and inline-level first child of a block container.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxelement.style.initialLetter = "2 1";

Syntax

CSS initial-letter syntax

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

Example of the initial-letter property:

CSS initial-letter code example

<!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 1;
        initial-letter: 2 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

CSS initial-letter

Values

ValueDescription
normalNo initial-letter effect. This is the default value.
<integer> <integer>The first value specifies how many lines the letter drops. The second value specifies how many lines it rises.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

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