By David Kudler
Since some readers asked for practical examples of CSS tricks for ebooks, I thought I’d share some of my favorites.
These examples presume that you’ve got a working understanding of how to use Cascading Style Sheets to make beautiful ebooks. If you haven’t read the previous posts on the anatomy of an ebook, on HTML, and on CSS (1, 2, and 3), now would be a good time. Or you can check out my new ebook on ebooks, Inside the Box: An Introduction to ePub, HTML & CSS for the Independent Author/Publisher.
A favorite way to start off the body text of a chapter or of a new section is to use drop caps. The practice goes back to medieval illuminated manuscripts, which used beautifully illustrated drawings around an enlarged version of the first letter in a chapter to make it easier to find the section you were looking for.
In modern book design, this means setting the first letter so that it’s two or three times the size of the body text (sometimes more), sometimes in a decorative font, and (when cost permits) in a contrasting color. And instead of rising from the baseline of the text, the capital letter drops down into the body of the paragraph — ergo, a drop cap.
Well, ebooks make cost a non-factor, so color is a fun thing to play with here!
There are a few ways to make sure that the first letter (or two, if there are quote marks) of the first paragraph in a section/chapter are drop caps.
The Standard Way: <span>
The easiest is to mark the letter you want to be drop caps using <span class=”drop-caps”> tags, like this:
Then, in the CSS stylesheet, place the following rules:
Let’s look at those rules line by line.
p.Body-First and span.drop-caps are the selectors. So any <span> with the class drop-caps or paragraph with the class Body-First will follow the rule.
Why do I need a separate Body-First paragraph style? Well, drop caps should start flush against the left margin. If I’m indenting the first line of my paragraphs, I need to make an exception in the case of the first body paragraph: text-indent: 0;
float:left; tells the ereader to push the whole span container over to the left margin of the enclosing container, and tells it to flow the rest of the text around the span.
font-family: Zapfino, cursive, serif; tells the ereader to apply the decorative handwriting font Zapfino to the letter. If the ereader doesn’t have that font, it will display its default cursive font. If it doesn’t have one of those, it will display a serif font. 
color:darkred; tells the ereader to display the drop cap in, you know, dark red.
font-size:3em; tells the ereader to display the drop cap at three times the size of a standard capital letter.
The remaining rules all control the position of the drop cap relative to the body text. Those happen to be the measurements that I came up with for this example. Please feel free to play around with them until you’re happy with how they look.
By the way, here’s how that paragraph would display:
Not bad! The full justification and short line-width makes the paragraph a little loose. But the drop cap looks nice!
The Easy Way: Combinators
Now, if I didn’t want to have to place a span around every drop cap (because, come on, that’s a pain), I can use something called a pseudo-element selector. Pseudo-elements allow me to tell the ereader, for example, to select just the first letter (or first punctuation mark and letter) within a paragraph with the class Body-First.
What would that look like?
The pseudo-element is ::first-letter. It selects… the first letter within the selector element. 🙂 There are lots more that you can play with (see the IDPF page for a basic rundown).
Except for the selector, that’s exactly the same rule as before — but now, every time we set a body paragraph to the class Body-First, it will automatically gain a drop cap! No setting the span element around the first letter. Very nice!
But say we want to be REALLY lazy, and don’t even want to set a separate class for the paragraph — we want all the body paragraphs to be the same, but we want the first one after the chapter head or a section break to have a drop cap.