How to make CSS a paragraph with Capitular letter (Drop Caps)

Question

I would like to style only the first letter of each paragraph of my text, but I don’t want to have to separate that letter with a <span>, because I want to keep the correct semantics of the word, and not have to "break it" with a tag.

For example what I don’t want that’s it:

span {
  font-size: 2rem;
  font-weight: bold;
  color: red;
}

<section>
  <h2>Título</h2>
  <p><span>L</span>orem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, excepturi.</p>
  <p><span>I</span>psum dolor sit amet.</p>
</section>

Is there any way to style with CSS only the first letter for something similar to this image, but without having to separate it into another tag?

Answer 1

Just use the pseudo-element first-letter, which, as its name says, corresponds to the first letter of the element in question:

p::first-letter {
  font-size: 2rem;
  font-weight: bold;
  color: red;
}

<section>
  <h2>Título</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, excepturi.</p>
  <p>Ipsum dolor sit amet.</p>
</section>

Some details to consider, because the definition of "first letter" is not always trivial. According to documentation:

• Punctuation characters (which are those defined by unicode categories: Ps (open), Pe (close up), Pi (initial quote), Pf (final quote) and Po (others)) which are immediately before the first letter are also changed by first-letter.

  See in the example below that both the opening quotes and the letter I have their style altered:

p::first-letter {
  font-size: 2rem;
  font-weight: bold;
  color: red;
}

<section>
  <h2>Título</h2>
  <p>"Ipsum dolor sit amet."</p>
</section>

• Some languages have characters whose uppercase version is represented as two letters. An example is german character ß, that when turned to capital letters SS. In this case, the two letters S will have their style changed.

  In the example below I use text-transform: uppercase to transform the ß in capital letters, see that the result SS in red.

p::first-letter {
  font-size: 2rem;
  font-weight: bold;
  color: red;
  text-transform: uppercase;
}

<section>
  <h2>Título</h2>
  <p>ßabc</p>
</section>

• Finally, the pseudo-element ::before can put some text at the beginning of the widget. In this case, this text will also be affected by first-letter.

  In the example below I put a text before the paragraph using before. See that in this case first-letter considered the first letter of the added content instead of the paragraph text:

p::first-letter {
  font-size: 2rem;
  font-weight: bold;
  color: red;
}

p::before{
  content: "Adicionando texto antes de " attr(type);
}

<section>
  <h2>Título</h2>
  <p>abc</p>
</section>

---

To have an effect closer to the image of the question, see the reply from @fernandosavio.

Answer 2

Nothing to add regarding the other answers, apart from the use of float: left to have an effect more like the print of the question.

p::first-letter {
    font-size: 4rem;
    font-weight: bold;
    float: left;
    margin: 2px 5px;
}

<section>
  <h2>Título</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc luctus rhoncus enim, eget sodales tellus accumsan a. Vestibulum eu tellus pretium, varius mauris ut, ullamcorper mi. Aliquam volutpat lacus a urna interdum vulputate. Aliquam dictum in justo vitae blandit. Mauris iaculis pretium massa non auctor. Ut pretium ut velit at vulputate. Sed eget pellentesque libero. Nunc cursus est erat, id suscipit risus dapibus ut. Ut vel mattis purus. In dapibus felis vel ullamcorper sagittis. Mauris malesuada laoreet nibh, eu maximus magna volutpat sit amet. Nam vehicula congue fermentum.

  <p>Suspendisse vehicula ligula eget ipsum blandit ornare. Etiam enim erat, sollicitudin eu eros sit amet, blandit fermentum diam. Vestibulum eleifend gravida leo non feugiat. Vivamus quis arcu sed ligula pharetra commodo non sit amet massa. Pellentesque congue sollicitudin hendrerit. Nullam sed efficitur nisl. Suspendisse et augue est.

  <p>Ut vestibulum magna non consectetur molestie. Donec ornare accumsan metus, vitae rutrum augue gravida quis. Donec et neque ut lacus tristique facilisis vitae nec est. Etiam sagittis facilisis nisi, vel vestibulum nunc ultricies ac. Fusce sit amet egestas nibh. Morbi accumsan purus sem, bibendum posuere tortor aliquet in. Maecenas vel ultrices libero, eu varius nisi. Pellentesque eget justo quam. Vestibulum lacinia eros eget pretium rutrum. Proin non nisl id risus mollis eleifend. Maecenas molestie erat dignissim accumsan sodales. Pellentesque non lorem in nunc auctor hendrerit porttitor non lorem. Integer faucibus ac diam eget elementum. Quisque pharetra accumsan egestas. Vivamus sit amet ipsum bibendum, vestibulum diam sed, tincidunt orci. 
</section>

Answer 3

You can use p::first-letter

Select and style the first letter of each element <p>

Definition and Use

The selector ::first-letter is used to add a style to the first letter of the specified selector.

Note: The following properties can be used with ::first-letter:

• properties of the source
• color properties
• background properties
• margin properties
• fill properties
• border properties
• text decoration
• vertical-align (only if float is 'None')
• text-Transform
• line-height
• float
• clear

Note: The selector ::first-letter can only be used with block level elements.

Source W3schools

Example

p::first-letter {
    font-size: 2rem !important;
    font-weight: bold !important;
}

<section>
  <h2>Título</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, excepturi.</p>
  <p>Ipsum dolor sit amet.</p>
</section>

Answer 4

Yes, just use the dial ::first-letter and apply the style you want.

section p {
  vertical-align:text-top;
}

section p::first-letter{
  font-size: 2rem;
  font-weight: bold;
  color: red;
  text-transform: uppercase;
  margin-top: -.4rem;
  margin-left: 1rem;
  padding-right: 1rem;
  float:left;
}

<section>
  <h2>Título</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>ipsum dolor sit amet.</p>
</section>

Answer 5

Hugo,

I think that’s what you’re looking for.

p {
	font-size: 12px;
}
p:first-letter {
	font-size:300%;
}

<p>Este texto destina-se a demonstrar o 
 pseudo-elemento first-letter, bla...bla...bla...
bla... bla...bla...bla...bla...bla... bla...bla...
bla... bla...bla...bla...bla...bla... bla...bla...</p>

Font: https://www.maujor.com/tutorial/pseetut.php