CSS :first-letter - Style the First Letter of an Element

The CSS ::first-letter pseudo-element is used when we need to apply style to the first letter of a text. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p::first-letter {color: brown; font-weight: bold; font-size: 32px;}
   </style>
</head>
<body>

   <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis, quis!.</p>

</body>
</html>

Output

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis, quis!.

The effect is applied to all P element. Therefore, if there are multiple paragraphs, then the first letter of all paragraphs should be styled as defined. To style first letter of particular paragraph only, follow the example given below.

Style First Letter of Particular Element using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p#one::first-letter {color: goldenrod; font-weight: bold; font-size: 32px;}
   </style>
</head>
<body>

   <p id="one">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis, quis!.</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda itaque repudiandae, 
   commodi vel est quia saepe?</p>

</body>
</html>

Output

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis, quis!.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda itaque repudiandae, commodi vel est quia saepe?

In above example, I've used ID to identify the paragraph to select and style the first letter of that particular paragraph.

List of Properties that can be applied to ::first-letter

CSS Online Test

« Previous Tutorial Next Tutorial »