Blog Styling Tip: How to use drop cap styling

How to create a 'drop cap' design

You need to choose the following design elements. This list references the actual CSS statements in the next section.

1. Size of the first letter 
   font-size:73px;
   Instead of 73 pixels (px) use any large number --- these are sized at 73, 50 and 40px.

   A A A

2. Color of the first letter
   color:#000000;
   If you want the default text color, then omit this statement. For color contrast, use a color selector tool to find a color that complements your design. e.g. color:#333399 for this shade of blue.

   A

3. Family of font
   font-family: Georgia,Serif;
   "Serif font styles are named after the small decorative strokes that cross the ends of the main letter strokes, called serifs." - CSS Font Family Glossary.  Serif fonts are more stylish than sans-serif fonts (without decorative strokes), such as Arial.

   A vs A

4. Space (padding/margin) around the letter
   padding:5px 5px 5px 0px;
   margin:4px 5px;
   If you want the letter to line up with the left paragraph margin, then you need to have zero padding on the left. The margin property is more useful for divides rather than paragraphs. Read more about margins, padding and borders for more control over your design.
5. Border width and color
   border:1px solid #000000;
   

   The '1px' sets the border width, 'solid' sets the line style, # specifies the color. If you don't want a border, set the width to 0px. Other line styles are 'dashed, dotted, grooved...' The color code for black is #000000. See example 'a' below for a black border drop cap design.

6. Background color and image
   background-color: #ffccff;
   or
   background-image:url(your image.jpg);
   

   See example 'b' for a color background and 'c' for an image background. Omit these if you don't want them. Change the pink #ffccff to your color. Use your image url.

   A	A	A
   example a	example b	example c

What makes it work automatically?

So how in the world is this done without images for each letter of the alphabet? The answer is something called the first-letter pseudo element. Basically, your browser interprets the styling across the board for the first letter of the first paragraph <p> within your blog post.  There is no Html element that targets the first letter, hence the name 'psuedo element.'  The browser recognizes this styling when you code it in the CSS sheet as
:first-letter

You don't even see the effect until you actually publish the post and use the full browser. However, you can preview the template change in Blogger before saving it. I was able to show the examples a-c only by using a table for illustration only. You may be able to draft your design that way if it's complex.

How to change your stylesheet for drop caps

Now for the easy part. Customize these lines and add them to your blog's style sheet (style.css). If you have a Blogger blog just insert it before the end of the styling section in your template, using Layouts, Html. Contact us if you need help.

/* Drop-Cap Styling  - BWS tutorial Sept 09 */
p:first-letter {
font-size:73px;
color:#000000;
font-family: Georgia,Serif;
padding:5px 5px 5px 0px;
margin:4px 5px;
border:1px solid black;
background-color: #ffccff;
background-image:url(http://bloggingwithsuccess.net/wp-content/uploads/2009/10/blueforal-bkgrd.png);
background-position: center;
display:block;
float:left;
}
/* end of drop-cap styling */

Be sure to use either background color OR url, not both.

Summary

Dropping capitals (drop-caps) are done with CSS styling – no image overhead. After all, who wants to manage 26 images, one for each letter of the English alphabet? As you can imagine, this styling works best when you have lots of text. Otherwise, try a smaller font size for the drop letter (e.g. 20px) or just a font color that's different from the rest of the text for contrast.

Need more background on CSS? Check out our index of published blog styling tips, where you will find an introduction to CSS/Html basics and some other resources. Let us know when you see other blog design elements that make you ask, "How did they do that?"