Web Design Tips and Tricks

How to Make Fancy Initial Caps

Wouldn't you like to dress up your blog or website articles with fancy descending caps in the opening paragraph? Of course you would. And it can be easily done with CSS classes.

The trick is to use the first-letter and first-line pseudo classes that will apply a special style to those parts of a paragraph. Here's an example defining a paragraph of class "first." This would go in the <head> section of your page or in your external style sheet:

<style type='text/css'>

p.first:first-letter
{
font-size: 3.5em;
font-family: Times,serif;
font-weight: bold;
color:red;
margin-top: .1em;
margin-right: .05em;
float: left;
}

p.first:first-line
{
font-weight: bold;
}
</style>

This will give you a large initial cap with the attributes you choose. The float:left makes the rest of the paragraph text flow around the initial letter. Omit the float attribute if you just want a large cap lined up with the base of your normal text instead of descending into the paragraph.

The optional first-line style puts the rest of the first line in bold You might also try font-variant: small-caps to capitalize the first line. After that your normal paragraph style will take over.

Adjust the font-size and margins of the first-letter style to give the desired placement. You may have to use negative values for the top margin, which is perfectly acceptable. Specifying the size and margin in "em" instead of points or pixels will insure that it displays correctly even if the font size is changed in the user's browser window. 

Note that an "em" is based on the size of the current font. When you ask for a font-size of 3.5em it will be 3.5 times the size of the default font for the paragraph. However, when you set the top margin it will be based on the size of the large capital letter, so you'll need a correspondingly small value or else the first letter will be pushed WAY down the paragraph.

For fancier effects, try adding a border and background-color to the first-letter. You can even use a background-image to get really ornate. Use the padding attribute to adjust the proportions of the surrounding border and image.

border:1px solid brown;
background-color:tan;
background-image: url(fancy_bg.png);
padding-left:2px;
padding-right:2px;

MAKING IT AUTOMATIC

In order to make use of the above styles, you will have to start your paragraph with <p class="first"> to set the class. If you'd like to make the style automatic you can change the class designators to use the first-child pseudo class like this:

div > p:first-child:first-letter

This will apply the first-letter style to the first paragraph in a division. Or you can use:

h1 + p:first-letter

This will apply the first-letter style to the first paragraph following an h1 heading. You can do the same for the first-line style.

What if you want only the first word in the paragraph to be capitalized, and the rest of the first line to be bold? Unfortunately there is no first-word pseudo class, but you can just type the first word in caps and let the styles take over from there. Surely we can do that much manually!