Tutorials


CSS ::first-letter property


The ::first-letter pseudo-element in CSS is used to apply styles to the first letter of a block-level element's content. This pseudo-element is commonly used for typographic effects, such as creating drop caps or emphasizing the initial character of a paragraph or other text blocks.

Syntax

selector::first-letter {
  /* styles */
}
  • selector: The element to which you want to apply the styling.
  • ::first-letter: The pseudo-element that targets the first letter of the element's content.

How It Works

  1. Basic Usage:

    • The ::first-letter pseudo-element applies styles to the first letter of text within a block-level element. This can be used to create typographic effects or emphasize the beginning of a text block.
    p::first-letter {
  font-size: 2em;
  font-weight: bold;
  color: red;
}
    • In this example, the first letter of every <p> element will be larger, bold, and red.

  2. Style Properties:

    • The properties that can be used with ::first-letter include:

      • font-size
      • font-weight
      • font-style
      • font-family
      • color
      • text-transform
      • line-height
      • float
      • margin
      • padding
      • border
    h1::first-letter {
  font-size: 3em;
  color: navy;
  float: left;
  margin-right: 5px;
}
    • This example enlarges the first letter of every <h1> element, changes its color to navy, floats it to the left, and adds some margin on the right.

  3. Drop Caps:

    • The ::first-letter pseudo-element is often used to create drop caps, where the first letter of a paragraph is enlarged and styled to stand out.
    .drop-cap::first-letter {
  font-size: 4em;
  font-weight: bold;
  color: darkblue;
  float: left;
  line-height: 1;
  margin-right: 5px;
}
    • In this example, the first letter of elements with the class .drop-cap will be styled as a drop cap with a large font size, bold weight, dark blue color, and proper margin and floating.

Examples

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>First-Letter Pseudo-element Example</title>
  <style>
    p::first-letter {
      font-size: 2em;
      font-weight: bold;
      color: red;
    }

    h1::first-letter {
      font-size: 3em;
      color: navy;
      float: left;
      margin-right: 5px;
    }

    .drop-cap::first-letter {
      font-size: 4em;
      font-weight: bold;
      color: darkblue;
      float: left;
      line-height: 1;
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <p>This is a paragraph where the first letter will be larger and styled differently than the rest of the text.</p>

  <h1>This is a heading</h1>

  <p class="drop-cap">This is a paragraph with a drop cap effect, where the first letter is significantly larger and styled to stand out.</p>
</body>
</html>

Explanation:

  • p::first-letter:

    • Enlarges and colors the first letter of every <p> element in red and bold.

  • h1::first-letter:

    • Enlarges and colors the first letter of every <h1> element in navy, floats it to the left, and adds margin on the right.

  • .drop-cap::first-letter:

    • Applies a drop cap effect to the first letter of <p> elements with the class .drop-cap, making it much larger, bold, dark blue, and adding appropriate floating and margin.

Important Points

  1. Block-Level Elements:

    • The ::first-letter pseudo-element only applies to block-level elements. It will not work with inline elements.

  2. Text Only:

    • The ::first-letter pseudo-element affects text content only. It will not apply to other types of content like images or non-textual elements.

  3. Limited Property Support:

    • Not all CSS properties are applicable to ::first-letter. Ensure to use supported properties for proper styling.

  4. Floats and Margins:

    • ::first-letter often uses float to create typographic effects like drop caps, and margin or padding to adjust spacing.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about