If you’ve ever read a magazine you’ve probably noticed that often the first character on a page stands out. Usually its larger, a different color, or stylized in some way. This effect is called an initial or a drop cap. Using CSS it is fairly simple to achieve this effect. CSS supports the pseudo element “first-letter” which allows you to modify the appearance on the first letter of a paragraph:

p:first-letter {
//style here
}

Notice that the code above will effect the first letter of every paragraph. For the purpose of creating a drop cap effect, we only want the first paragraph to be affected, so we must also use the first-child pseudo class:

p:first-child:first-letter {
//style here
}

Using this method you can now implement a drop cap effect. To do this you first need to decide between two common styles. In some cases the initial falls below the first line, in others the base of the initial is consistent with the base of the rest of the line. With respect to CSS, the difference between the two will be a float.

p:first-child:first-letter {
	/* The float causes the top of the intial to
	be consistent with the rest of the line, while
	the base is allowed to extend below. Removing
	this line will cause the base to line up with
	the rest of the line */
	float: left;
	//style here
}

You can add any of the following properties to your first-letter element:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

If you decide to use the float, I recommend using the after pseudo element to clear the float following the paragraph. Failing to do so may cause the drop cap the interfere with the following paragraph, if the first paragraph is short.

p:first-child:first-letter {
	float: left;
	//style here
}
p:first-child:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

If you are using this in your WordPress theme, you should specify the class of the div your post is wrapped with. In my case it is the “post” class:

.post p:first-child:first-letter {
	float: left;
	//style here
}
.post p:first-child:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

In addition to this you may also want to use the first-line pseudo element the modify the style of the first line, which is also common in publications. Here is the current drop cap code I’m using:

.post p:first-child:first-letter {
	float:left;
	background-color: #eeeeee;
	line-height:30px;
	padding: 5px;
	color: #237ab2;
	font-weight: bold;
	font-size:40px;
}
.post p:first-child:first-line{
	font-variant: small-caps;
}
.post p:first-child:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}