Create Drop Caps Using CSS3

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:

Join us in our newest publication:
  1. p:first-of-type::first-letter{
  2. color: #b40049;
  3. font-size: 28px;
  4. font-weight: bold;
  5. margin-right: 3px;
  6. margin-bottom: 0px;
  7. }

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.

Share and Enjoy !

0 0