TamWiki

(redirected from Main.DropCapsWithCSS)

CSS is a powerful little language for specifying all sorts of things you can do with layouts and elements on a web page. Here we look at bringing an old typography trick for books to the modern web: '''Drop Caps".

Drop Caps are pretty much what the name implies: the first letter of a paragraph is enlarged and dropped to the left of the first paragraph on the page. This is seen in books, newspapers, and magazines all over. It is a classic design trick that can be successfully brought to a web page to give it a bit of elegance.

:first-letter pseudo-class

The trick is to use the pseudo-class :first-letter on the paragraph you are styling. This selector allows you to just pick the first letter off a paragraph without the need for spans. An example shown here:

.firstpar is a class we've created that is applied to the first paragraph tag (<p class="firstpar">) to get it to react to the definition we're providing. Appending the pseudo-class :first-letter to the class name gives us further control over what is affected.

The letter is given a type face and size commensurate with a dropped cap in this design. I chose to use the same type face as the heading font for page consistency. We make it big and bold. Next comes the tricky part: we make this character float left on the paragraph. This is what makes it a drop cap. When you float the character, it becomes a block display, and drops down compared to the rest of the first line. But it's not quite there yet. We have to add some padding to make it go into just the right position and give it a little space in which to sit. We want it to go flush to the left edge of the container, but give it a little easement around the other 3 edges. If we don't specify some top padding, the character actually will float up a bit if you've got any padding before the paragraph itself. The other padding (right, bottom) are just to give it a comfy space from the rest of the paragraph body.

Here's the corresponding html:

Here's what our example looks like rendered: