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