Book-style Chapter Introductions Using Pure CSS

Do you remember all those wonderful hand-me-down children’s books from your childhood, or perhaps those dusty old tomes you’ve leafed through at a used bookstore recently? I still like looking through old books of Days Gone By. Their typefaces, in particular, give me a warm fuzzy feeling in the far reaches of my tummy. The scripty drop-caps at the beginnings of chapters, and the first line of small caps leading into the first full paragraph, in particular, fill me with all sorts of nostalgia.

So today’s tutorial will show you how easy it is to create book-style chapter (article, whatever) introductions using nothing but pure CSS — no XHTML was harmed in the making of this tutorial. We’ll use two types of selectors which I haven’t talked about yet here: adjacent sibling selectors and pseudo-element selectors. I’ll explain each type briefly before we get started.

Adjacent Sibling Selectors are a way of styling an element that appears directly adjacent to another element. So, for example, if you knew that the first paragraph to follow an image in your XHTML was always going to be a caption, and you wanted that styled differently, you could write something like this:

img + p {
	color: #999;
	font-style: italic;
} 

This would turn the paragraph immediately following the image gray and italicize it, all without any extra code in your XHTML.

Pseudo-Element Selectors refer to parts of your XHTML that aren’t technically elements of their own right, but can be easily distinguished from the surrounding code due to their nature. The most common two pseudo-elements (and the two we’re using here) are :first-letter and :first-line.

Creating a Book-Style Introductory Line

So what we need to do to create our book-style line is create a drop-cap of the first letter, and the rest of the first line in small caps. And we want to do it without having to resort to classes or IDs to get it done. What we’re assuming in this exercise is that your XHTML is already well-formed – your articles or chapters always start with a heading tag (I’m using <h4> tags), and you’re using paragraph tags instead of (shudder) line breaks. So here’s how we do it:

You’ll start with some fairly simple XHTML that looks something like this:

<h4>Article Titles for Fun and Profit</h4>
<p>This is our first paragraph. Don’t you think
the first line should stand out?</p>
<p>Our second paragraph doesn’t need such
fancy-pants styling.</p>

And then we’ll use CSS to style the first line of the first paragraph following our 4th level heading:

h4 + p:first-line {
	font-variant: small-caps;
	font-size: 1.1em;
}

This gives us a small-capped line that is slightly larger than the rest of the surrounding text. Now, all we need to do is create our drop cap:

h4 + p:first-letter {
	float: left;
	font-size: 2.5em;
	font-weight: bold;
	font-family: "Monotype Corsiva",
	"Apple Chancery", fantasy;
	margin: 5px 5px 5px 0;
} 

Here, I’ve floated the letter to the left (which causes the rest of the text to flow around it), increased its size, made it boldface, set it in a scripty font (you could chose any font here, but I was going for a bookish look), and added a bit of a margin to make sure there isn’t any overlap.

We’ve managed to create an introductory line without a single byte of XHTML.

And that’s all there is to it! You can see a finished example here. We’ve managed to create an old-school book-style introductory line without adding a single byte of XHTML. This is a quick and easy way to add some visual appeal to your articles. It could even make for an interesting addition to a print style sheet, adding a bit of classic authenticity.

Now, I have one caveat: this does not work in IE6. But the text simply degrades nicely into an otherwise unaffected first line. No harm, no foul.

18 Comments

  1. Daniel said:

    This is a pretty cool technique! I like the idea of applying it to a print stylesheet. I might give it a try in my next project.

  2. Caustic Dave said:

    Very cool! Thank you for sharing this CSS tip.

  3. Dito said:

    very cool, so glad i stumbled across this!

  4. Rob Glazebrook said:

    Thanks for all the comments, everyone. :)

  5. David Storey said:

    While this works well, there may be situations where you don’t know if the p element will be the first element after the article heading, such as if you have a figure or an introductory list or such. With css3 you can get around this by having something such as p:first-of-type:first-letter, which will always find the first p element in the article (assuming you use the correct selector before the p). The showstopper here is it doesn’t work in as many browsers (possibly only Opera, Konqueror and the latest WebKit nightlies), but it degrades in the same way.

  6. Rob Glazebrook said:

    Agreed, David… this technique relies on a certain level of consistency in one’s writing.

    And that’s a great tip on the first-of-type selector. It’ll be nice when CSS3 is more widely supported in the browser community.

  7. Web Standards In Design said:

    Great tips, but how do they fair in IE

  8. Web Standards In Design said:

    Oops, my comment got chopped in half!

    How do they fair in IE 6 and less, in Win and Linux?

  9. Rob said:

    Good question…

    This technique does not work in IE6 or below — it works fine in IE7, but not anything lower on the IE side. Instead, it degrades into perfectly normal text. No harm done.

    However, it seems to work well in Linux browsers. Konqueror and Firefox for Linux both display it without a problem.

  10. Michael Greve said:

    It looks good in Firefox, but when I try it in IE7 the floating works (sort of), but the first-letter is raised above the second line, and is normal text.

  11. Rob said:

    Hi Michael,

    I’ve noticed, too, that the floating differs between IE7 and Firefox, and between IE7 and a lot of other browsers. Basically, you’d just have to tweak the margin a little bit to get a good compromise between the two. For instance, if you put “margin: 10px 5px 5px 0;” instead of what I have above, that would push it five more pixels further down.

    And the font looking normal depends mostly on what fonts you have installed and available on your system. It’ll look like the regular font unless you have the one I installed available. You’d just have to play around with font-family list until you find a set that works more places. I was going more for brief than exhaustive in my example. :)

  12. Joe Clark said:

    You need p+p {text-indent:1em} if you want to simulate book typography. The extra space between grafs also has to go. You’ve produced the Microsoft Word version of a book.

  13. Rob Glazebrook said:

    Good point, Joe. I will say that I was only shooting for a book-style introduction, and not an entire book layout. However, now you have me intrigued to see how much of a “classic” layout I could emulate. Perhaps a follow-up post should be in the works. :) Thanks for your comment!

  14. Richard Morton said:

    Great stuff and very useful.

    I am ever hopeful that one of these days a tip like this won’t say “by the way this doesn’t work in IE6″

  15. Braintrove.com said:

    Nice. Also check out this article on how to “Create a Drop Cap Using CSS” (http://braintrove.com/article/29).

  16. On March 04, 2008
    10:49PM

    Jermayn Parker said:

    Best way I have seen this done before, no extra html elements. Love it!

  17. On March 18, 2008
    6:33AM

    Floroskop said:

    Hello!
    I think this try.

  18. On June 23, 2009
    11:31PM

    lymiwi said:

    It still had. Were almost invisible, since id grown a modest, we will last.

13 Responses Elsewhere

  1. crawlspace|media » Blog Archive » Daily Ma.gnolia Links for February 02 said:

    [...] Book-style Chapter Introductions Using Pure CSS – CSSnewbie Co-worker’s excellent method for drop-caps and old-style ornamentation in pure css. Well done and worth a look. [...]

  2. fcicq's del.icio.us » Blog Archive » links for 2008-02-04 said:

    [...] Book-style Chapter Introductions Using Pure CSS – CSSnewbie (tags: css typography webdesign) [...]

  3. Internet Brain » Book-style Chapter Introductions Using Pure CSS said:

    [...] Book-style Chapter Introductions Using Pure CSS – CSSnewbie doesn’t work in IE6, just looks like the rest of the text. [...]

  4. Fatih Hayrioğlu’nun not defteri » 07 Şubat web’den şeçme haberler said:

    [...] CSS ile kitap bölüm girişi örneği. Bağlantı [...]

  5. robglazebrook.com » Blog Archive » links for 2008-02-19 said:

    [...] Book-style Chapter Introductions Using Pure CSS – CSSnewbie (tags: css tutorial typography book webdesign) [...]

  6. Best Of February 2008 | Best of the Month | Smashing Magazine said:

    [...] Book-style Chapter Introductions Using Pure CSSThis article describes how you can create the scripty drop-caps at the beginnings of chapters, and the first line of small caps leading into the first full paragraph. With CSS. The technique doesn’t work in IE. [...]

  7. Webcreatives » Book-style Chapter Introductions Using Pure CSS - CSSnewbie said:

    [...] Book-style Chapter Introductions Using Pure CSS – CSSnewbie [...]

  8. Kolz Blog » Blog Archive » Best Of February 2008 said:

    [...] Book-style Chapter Introductions Using Pure CSS This article describes how you can create the scripty drop-caps at the beginnings of chapters, and the first line of small caps leading into the first full paragraph. With CSS. The technique doesn’t work in IE. [...]

  9. On May 06, 2008
    11:54PM

    CSS Drop Caps 101 (with examples) | Alpha Blog Designs said:

    [...] Book-Style Chapter Introductions Using CSS – CSS Newbie [...]

  10. Six Ways to Style Blockquotes - CSSnewbie said:

    [...] from my Book-Style Chapter Introductions article, we can also distinguish our blockquotes by using drop-caps, stylized text, or (in this [...]

  11. CSS Newbie Gets a Facelift said:

    [...] Welcome to the new and improved CSS Newbie! This new version of the site has been a long time in the making, so I’m very excited to finally have it ready for its grand unveiling. And to make things extra auspicious, today is also the eight month anniversary of the site’s official launch on February 1, 2008. [...]

  12. CSS Newbie Gets a Facelift | Castup said:

    [...] Welcome to the new and improved CSS Newbie! This new version of the site has been a long time in the making, so I’m very excited to finally have it ready for its grand unveiling. And to make things extra auspicious, today is also the eight month anniversary of the site’s official launch on February 1, 2008. [...]

Leave a Comment