Are you bored about how texts appear on your page? You can kill the boredom by making use of fancy initial caps via CSS.

The 3 fundamental styles of initial caps are: raised (first letter is bigger than and placed on the same line as the current text); adjacent (first letter is found in one column beside the other text); and the dropped (the first letter is bigger and dropped below first line of text.

Using one of these varieties of styles of initial caps is a good means on how you can add something visually appealing as compared to a long train of visually unattractive text.

Create a Simple Initial Cap

To make a simple raised cap, try this:

p:first-letter { font-size: 3em; }

But many browsers see that the first letter is larger than the rest of the text on the line, so they make the leading equal to what would make sense for that first letter, not the rest of the line.

Luckily, this is easy to fix with the first-line pseudo-element and the line-height property:

p:first-letter { font-size: 3em; }
p:first-line { line-height: 1em; }

It’s just a matter of experimenting on the sizes and measure until you find the perfect size of initial cap for your page.

Make Initial Caps Sexier

Now that you know how to make an initial cap, push this trick a little bit to the edge. Play with colors, background colors, borders, or whatever delights you. A fairly simple style is to reverse the colors of your font and background color just for the first letter. Try this:

p:first-letter {
font-size : 300%;
background-color: #000;
color: #fff;
}
p:first-line { line-height: 100%; }

Now make it even better! Another trick you can try is to center the first line. This can be tricky with CSS, as the middle of the text line can be different if your layout is flexible. But with some playing around of the values, you can indent your first line enough to make the first letter appear to be in the middle. Just play with the percentage on the text-indent of the paragraph until it looks right:

p:first-letter {
font-size : 300%;
background-color: #000;
color: #fff;
}
p:first-line { line-height: 100%; }
p { text-indent: 45%; }

There are still a number of tricks you can come up with regarding dressing up initial caps. We can actually think of dozens and dozens the only limit being our own creativity and diligence to experiment.

Tags: Fancy Initial Caps via CSS