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.
On February 02, 2008
7:48PM
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.
On February 02, 2008
8:55PM
Caustic Dave said:
Very cool! Thank you for sharing this CSS tip.
On February 02, 2008
8:59PM
Dito said:
very cool, so glad i stumbled across this!
On February 03, 2008
12:21PM
Rob Glazebrook said:
Thanks for all the comments, everyone. :)
On February 12, 2008
4:34AM
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.
On February 12, 2008
8:57AM
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.
On February 12, 2008
5:20PM
Web Standards In Design said:
Great tips, but how do they fair in IE
On February 12, 2008
5:21PM
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?
On February 12, 2008
8:52PM
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.
On February 13, 2008
7:05AM
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.
On February 13, 2008
7:28AM
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. :)
On February 14, 2008
8:03AM
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.
On February 14, 2008
9:02AM
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!
On February 18, 2008
10:33AM
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″
On February 29, 2008
6:07PM
Braintrove.com said:
Nice. Also check out this article on how to “Create a Drop Cap Using CSS” (http://braintrove.com/article/29).
On March 04, 2008
10:49PM
Jermayn Parker said:
Best way I have seen this done before, no extra html elements. Love it!
On March 18, 2008
6:33AM
Floroskop said:
Hello!
I think this try.
On June 23, 2009
11:31PM
lymiwi said:
It still had. Were almost invisible, since id grown a modest, we will last.