initial-letter

Definition

The initial-letter property is used to style the first letter or character of a block-level element. It allows you to control the size, style, and position of the initial letter.

Examples

This will make the first letter of every p element have a font size of 2em and be bold.:

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

This will create a drop cap effect for the first letter of any element with the class drop-cap:

.drop-cap::first-letter {
  float: left;
  font-size: 4em;
  line-height: 1;
  margin-right: 0.2em;
}

This will target the first letter of the first letter of any blockquote element, and give it a font size of 4em and a red color:

blockquote::first-letter::first-letter {
  font-size: 4em;
  color: red;
}

Values

Best Practices

• Use the initial-letter property sparingly to avoid visual clutter and distraction.
• When using initial-letter-size, keep the value relative to the font size to ensure consistency across different screen sizes and devices.
• When using initial-letter-wrap, make sure the text flows properly and doesn't overlap with other elements on the page.
• Avoid using initial-letter to create decorative effects that may interfere with the readability of the content.
• Consider the accessibility implications of using initial-letter and ensure that the text remains legible and understandable for all users.

Browser Compatibility