Drop Caps Using CSS

The Accessible Way

Your best bet is to watch Ethan’s 5-minute video and then reference this:

CSS

Just wrap the first character of the paragraph in a span, then target the span with CSS and style away.

<p>
  <span class="firstcharacter">L</span>
  orem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
.firstcharacter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

The CSS3 way (no extra markup)

Target the first character of the first paragraph using pseudo class selectors. No extra markup needed, but no IE < 9 support.

<p>
  Just a normal sentence.
</p>
p:first-child:first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

The initial-letter way

Using initial letter to create a drop cap

The browser support for initial-letter is pretty sparse at the time of this writing, but it can be used to calculate the number of lines the drop capped letter should occupy and the font size instead of doing that on your own.

p:first-child:first-letter {
  color: #903; 
  font-family: Georgia;
  initial-letter: 2;
}
See also  Mailto HTML Links | CSS HTML

Leave a Reply