What is the initial-letter property in CSS?

Overview

The initial-letter property in CSSCascade Style Sheets specifies the first letter and the number of lines the first letter occupies.

We can see this property in newspapers and blogs, where the first letter is usually more prominent than the entire content.

Syntax

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

Property values

  • normal: This is the initial value. It states that this property has no effect.

  • number: This specifies how many lines the first letter should occupy.

  • integer: This specifies how many lines the initial-letter should sink.

  • initial: This will set the value to its default value.

  • inherit: This will inherit property from its parent value.

Code

The following is the basic HTMLHyperText Markup Language and CSS code to demonstrate the use of the initial-letter property:

Explanation

HTML

  • Line 3: We make a div to call the initial-letter property.

  • Line 4: We write the content to be displayed.

CSS

  • Lines 1–10: We set the styling for the main body.

  • Lines 11–14: We set the width of the message, which will display on the screen.

  • Lines 15–22: We set the properties to apply the initial-letter property.

Free Resources