Style First Letter of a Sentence

Style only the first letter of a sentence. Make it larger, indent, or any other styling. Apply only to the first letter of any block element.


p:first-letter {
  /* CSS styling for first letter here */


/* set the rest of the p elements to the same line-height */
p {line-height:24px;}

/* style the first letters of all p elements */
p:first-letter {
  font-size: 40px;
  font-weight: bold;
  line-height: 24px;
  margin: 15px 3px 0 4%;


In this example the the <p> element is styled. The first letter in each paragraph is made larger by the font-size and font-weight.

The line-height is set for the first-element and the paragraph so there won't be a gap between the first line and the rest of the paragraph.

The margin is set to give a 4% indent and a little added space above and to the right of the first-letter.

You can do any styling to the first-letter, such as skew, rotate, text shadow, color, etc...

As you can probably tell, I am just rambling so you can see the example of using the CSS first-letter.

Copyright © Website Development | Disclaimer | Privacy Policy | Terms of Use