CODEWITHSUNDEEP
htmlcss
Modaresi
Modaresi

Reputation: 233

Make first letter of the paragraph larger

I am working on my HTML assignment. It is basic CSS stuff (external style sheet) and I am almost done. Everything is working the way it should except one part which I cannot figure out why.

<article>
  <h2>About the Course</h2>
  <p>
    The Civil War and Reconstruction
    explores the causes and consequences of the American
    Civil War, covering American history from 1840 through 1876 in
    great detail. My primary goal is to interpret the multiple
    threads that run through this epic event and consider how these
    threads still engage the politics and culture of the
    present day. In this course we will rely heavily on primary
    texts, interpreting the events of the day through the words of
    those men and women who experienced it. We'll examine four main
    points of interest:
  </p>
</article>

So out of 21 requirements for this assignment #15 is:

For the first paragraph after the <h2> heading within the article element, create a style rule to display the first letter with a font size of 32 pixels.

So I did it this way:

article h2 p:first-of-type:first-letter {
    font-size: 32px;
}

That didn't work, so I changed it to:

article > h2 p:first-of-type:first-letter {
   font-size: 32px;
}

and still it doesn't work!

Upvotes: 4

Views: 7344

Answers (3)

Penny Liu
Penny Liu

Reputation: 17408

When stretching the content using font-size: 32px, you may notice a slight gap between the first sentence and the rest of the content.

enter image description here

Therefore, it is advisable to employ the initial-letter CSS property to avoid this additional spacing.

Please be aware of its limited browser support currently.

article h2+p:first-letter {
  font-size: 32px;
}

p:nth-of-type(2):first-letter {
  /* Initial letter occupies 2 lines and sinks 1 line */
  initial-letter: 2 1;
  color: red;
}
<article>
  <h2>About the Course</h2>
  <p>
    The Civil War and Reconstruction explores the causes and consequences of the American Civil War, covering American history from 1840 through 1876 in great detail. My primary goal is to interpret the multiple threads that run through this epic event and
    consider how these threads still engage the politics and culture of the present day. In this course we will rely heavily on primary texts, interpreting the events of the day through the words of those men and women who experienced it. We'll examine
    four main points of interest:
  </p>
  <p>
    The Civil War and Reconstruction explores the causes and consequences of the American Civil War, covering American history from 1840 through 1876 in great detail. My primary goal is to interpret the multiple threads that run through this epic event and
    consider how these threads still engage the politics and culture of the present day. In this course we will rely heavily on primary texts, interpreting the events of the day through the words of those men and women who experienced it. We'll examine
    four main points of interest:
  </p>
</article>

Upvotes: 1

user1234564
user1234564

Reputation: 71

article h2 + p:first-letter {
    font-size: 32px;
}

Upvotes: 2

Bojangles
Bojangles

Reputation: 101483

The paragraph isn't a descendant of the <h2>, but is after it. Change your CSS to this:

article h2 + p:first-letter {
    font-size: 32px;
}

The + (adjacent sibling) selector will select the first p element directly after the h2. There is a good StackOverflow answer explaining this in further detail here.

Additionally, you don't need :first-of-type pseudo selector either as the + only selects the first element.

Upvotes: 14

Related Questions