Drop capitals are commonly seen in newspapers or books. They can be identified by looking at the first letter of a paragraph or a page that is usually larger than the rest of the paragraph, bolded and often times a different font-family.
I've seen many different methods to achieve this effect in HTML and CSS, most of the time the method requires unnecessary elements or classes. I'll give an example of how to do drop caps in CSS without any classes, and then I'll show you a second method which will require you to place a single class on the parent element.
Styling Our Drop Cap in CSS Without Classes
The first option is if you want to style the first P element on every page of your website with a drop cap. The selector below will first use the :first-child pseudo selector to find our first P element and then it will select the first letter of the P element with the first-letter pseudo selector.
I've added some other visual effects to our drop cap such as a background-color, font-family, text-transform, and a double'd border which is seldom used.
body p:first-child:first-letter
{
background: #990000;
border: 4px double #ffcc00;
color: #ffffff;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: 3em;
font-weight: bold;
margin: 7px 10px 0px 0px;
padding: 10px;
text-transform: uppercase;
}
Using A Class
You may also want to selectively apply a drop cap to other blocks of text on your website. In this case, simply add a class to the paragraph and add this selector to your CSS:
.dropcap
{
...
}
