How to do with CSS a paragraph with capitular letter (Drop Caps)

Question

How to do with CSS a paragraph with capitular letter (Drop Caps)

Navigation

#1 by (7 votes)
#2 by (5 votes)
#3 by (4 votes)
#4 by (4 votes)
#5 by (4 votes)

8

I'd like to stylize only the first letter of each paragraph in my text, but I do not 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" with a tag.

For example what I do not want is this:

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 stylize with CSS just the first letter for something similar to this image, but without separating it into another tag?

html5 css css3 ux ui

asked by anonymous 31.10.2018 / 13:14

5 answers

5

Nothing to add about other answers, other than using float: left to have an effect more like the question's print.

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>

31.10.2018 / 13:51

4

Yes, just use the ::first-letter selector 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>

31.10.2018 / 13:26

4

You can use p::first-letter

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

Definition and Usage

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

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

font properties
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 ::first-letter selector 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>

31.10.2018 / 13:25

4

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: link

31.10.2018 / 13:28

Is it a good practice to use summary for documentation? How do I assign a value to an enum with binary notation?

score 7 · Accepted Answer

Just use the pseudo-element first-letter , which as the 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, as 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) , Pi (initial quote) , Pf (final quote) and Po (others) ) that are just before the first letter are also changed by first-letter .

See in the example below that both the opening quotation marks and the letter I have their style changed:

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 the German character ß , which when converted to uppercase SS . In this case, the two letters S will have their style changed.

In the example below I use text-transform: uppercase to transform ß to uppercase, see that the result has 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 ::before pseudo-element can put some text at the beginning of the element. In this case, this text will also be affected by first-letter .

In the example below I put text before the paragraph using before . Note that in this case first-letter considered the first letter of the content added 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>