Create Drop Caps Using CSS3

Published August 3, 2016 by CSS Newbies.

A drop cap is the first letter of a paragraph or a text block that is larger and usually styled differently from the rest of the letters. This can be done a number of different ways, including inserting <span> tags into your HTML, but one effective and quick way to do it is by using CSS. With the :first-of-type (use this if you want a drop cap on the first paragraph only) and the ::first-letter pseudo selectors, we can style the first letters of the paragraphs without having to alter our HTML.

Here’s what the CSS should look like:


p:first-of-type::first-letter{
color: #b40049;
font-size: 28px;
font-weight: bold;
margin-right: 3px;
margin-bottom: 0px;
}

And the final product will look something like this:

Screen Shot 2016-08-03 at 11.00.55 AM

If you want the top of the drop cap to be vertically aligned with the rest of the paragraph, you can add a float: left to the above code and then play around with the spacing. Using the ::first-letter selector, any type of styling including borders, colors, font-family changes, and font-style changes can be applied to the drop cap.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>