Book-style Chapter Introductions Using Pure CSS

Published February 1, 2008 by CSS Newbies.

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.

33 Responses

  1. Daniel (reply)

    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. Pingback: crawlspace|media » Blog Archive » Daily Ma.gnolia Links for February 02

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

  4. Pingback: Internet Brain » Book-style Chapter Introductions Using Pure CSS

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

  6. Pingback: Max Design - standards based web design, development and training » Some links for light reading (12/2/08)

  7. David Storey (reply)

    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.

  8. Rob Glazebrook (Author) (reply)

    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.

  9. Rob (reply)

    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 (reply)

    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 (reply)

    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 (reply)

    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 (Author) (reply)

    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. Pingback: robglazebrook.com » Blog Archive » links for 2008-02-19

  15. Pingback: Best Of February 2008 | Best of the Month | Smashing Magazine

  16. Pingback: Webcreatives » Book-style Chapter Introductions Using Pure CSS - CSSnewbie

  17. Pingback: Kolz Blog » Blog Archive » Best Of February 2008

  18. Pingback: CSS Drop Caps 101 (with examples) | Alpha Blog Designs

  19. Pingback: Six Ways to Style Blockquotes - CSSnewbie

  20. Pingback: CSS Newbie Gets a Facelift

  21. Pingback: CSS Newbie Gets a Facelift | Castup

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>