{"id":13,"date":"2008-02-01T16:46:36","date_gmt":"2008-02-01T22:46:36","guid":{"rendered":"http:\/\/cssnewbie.com\/css-rules\/book-style-chapter-intros\/"},"modified":"2008-02-01T16:46:36","modified_gmt":"2008-02-01T22:46:36","slug":"book-style-chapter-intros","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/book-style-chapter-intros\/","title":{"rendered":"Book-style Chapter Introductions Using Pure CSS"},"content":{"rendered":"

<\/a><\/p>\n

Do you remember all those wonderful hand-me-down children\u2019s books from your childhood, or perhaps those dusty old tomes you\u2019ve 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.<\/p>\n

So today\u2019s 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\u2019ll use two types of selectors which I haven\u2019t talked about yet here: adjacent sibling<\/em> selectors and pseudo-element<\/em> selectors. I\u2019ll explain each type briefly before we get started.<\/p>\n

Adjacent Sibling Selectors<\/strong> 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:<\/p>\n

img + p {\n\tcolor: #999;\n\tfont-style: italic;\n} <\/pre>\n
This would turn the paragraph immediately following the image gray and italicize it, all without any extra code in your XHTML.<\/p>\n
Pseudo-Element Selectors<\/strong> refer to parts of your XHTML that aren\u2019t 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\u2019re using here) are :first-letter and :first-line.<\/p>\n
Creating a Book-Style Introductory Line<\/strong><\/p>\n
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\u2019re assuming in this exercise is that your XHTML is already well-formed \u2013 your articles or chapters always start with a heading tag (I\u2019m using <h4> tags), and you\u2019re using paragraph tags instead of (shudder) line breaks. So here\u2019s how we do it:<\/p>\n
You\u2019ll start with some fairly simple XHTML that looks something like this:<\/p>\n
<h4>Article Titles for Fun and Profit<\/h4>\n<p>This is our first paragraph. Don\u2019t you think \nthe first line should stand out?<\/p>\n<p>Our second paragraph doesn\u2019t need such \nfancy-pants styling.<\/p><\/pre>\n
And then we\u2019ll use CSS to style the first line of the first paragraph following our 4th level heading:<\/p>\n
h4 + p:first-line {\n\tfont-variant: small-caps; \n\tfont-size: 1.1em;\n}<\/pre>\n
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:<\/p>\n
h4 + p:first-letter {\n\tfloat: left;\n\tfont-size: 2.5em; \n\tfont-weight: bold; \n\tfont-family: \"Monotype Corsiva\", \n\t\"Apple Chancery\", fantasy; \n\tmargin: 5px 5px 5px 0;\n} <\/pre>\n
Here, I\u2019ve 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\u2019t any overlap.<\/p>\n
We\u2019ve managed to create an introductory line without a single byte of XHTML.<\/p>\n
And that\u2019s all there is to it! You can see a finished example here.<\/a> We\u2019ve managed to create an old-school book-style introductory line without adding a single byte<\/em> 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.<\/p>\n
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.<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<\/p>\n
Do you remember all those wonderful hand-me-down children\u2019s books from your childhood, or perhaps those dusty old tomes you\u2019ve leafed through at a used bookstore recently? I still like looking through old books of Days Gone By. Their typefaces, in […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[165,173],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/13"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/13\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}