OR, HOW TO STYLIZE THAT FIRST PARAGRAPH WITHOUT ASSIGNING IT A CLASS

I thought I’d share a little bit of CSS coding I used in my ebook release MUST LOVE BREECHES. This will be a short post, but I thought there might be some who would like to use the code, so I’m sharing 🙂 For those totes familiar with CSS, this won’t be a revelation, just sayin’.

So, on most e-readers, my chapter beginnings look something like this:

Today, I’m going to share my code which stylizes that first line without having to wrap any SPAN tags around the first letter or the first line or first couple of words. In fact, the first line always gets stylized no matter how much the reader enlarges or reduces the page. In the example above, if the reader had reduced the type enough to have “truce” on the first line, it would be stylized correctly.

I’m indebted to Carolyn Crane for part of this code. I was reading INTO THE SHADOWS, one of her awesome romantic suspense novels, and it happened to be when I was struggling with stylizing my epub’s first line (I wanted to have some of the words small-capped, etc), and I noticed her whole first line was smallcapped, and I was like, wait, how can she know how many words that would be? So I expanded my text and it was like magic! I probably looked like a doofus at the restaurant as I made this discovery (I was eating dinner at my fave watering hole). So when I got home, I DM’ed Carolyn on twitter and she was gracious enough to share the secret (not really a secret, but it felt that way to me) CSS code that did this witchy magic:

p.firstpara:first-line {

font-variant: small-caps;

}

p.firstpara:first-letter {

font-weight: bold;

font-size: 130%;

}

I then took her code and made some changes to the CSS so that I wouldn’t have to give a class to every opening paragraph. So here’s the HTML for the opening:

<h1 title="Chapter Two"><a class="nolink" href="../Text/contents.xhtml#tocchapter2">Chapter Two</a></h1>

<p class="doodad"><img alt="New Chapter" src="../Images/doodad.png" /></p>

<p class="epigraph">I had a dream which was not all a dream.<br />

Lord Byron, <i>Darkness</i>, 1816</p>

<p>Isabelle slowly opened her eyes and brokered an uneasy truce with her stomach. The colors and shapes seemed overexposed, too sharp. Nearby, French doors led to the balcony.</p>

Notice that I have no class assigned to the opening paragraph, and yet it’s stylized. Here’s how I did it in the CSS stylesheet:

.epigraph + p {

text-indent: 0;

}

.epigraph + p:first-letter {

font-size: 1.2em;

font-weight: bold;

}

.epigraph + p:first-line {

font-variant: small-caps;

}

What I did above was essentially “say” that if there’s a P tag following the EPIGRAPH class (.epigraph + p) then don’t indent it. And then the next bit is telling it that in that paragraph following an epigraph, I want the first letter to be a tad bigger and bolded. And then the next one is telling it to make the first line of that paragraph have small caps.

So, with that bit of coding on the CSS side, I didn’t have to go through all of my chapters and add a specific class to the opening paragraph so that I could control it (or laboriously put span tags around the first three words to small cap them), I instead controlled it through its neighbor, saving me time.

EDITED TO ADD: I forgot to mention, that I also have the first line in scene breaks stylized too, and since they’re all preceded by a scene break image, I used that image class (doodadScene) to manipulate that first line:

.doodadScene + p {

text-indent: 0;

}

.doodadScene + p:first-letter {

font-size: 1.2em;

font-weight: bold;

}

.doodadScene + p:first-line {

font-variant: small-caps;

}

And if your opening paragraph simply follows your header, your code would be:

h1 + p {

text-indent: 0;

}

h1 + p:first-letter {

font-size: 1.2em;

font-weight: bold;

}

h1 + p:first-line {

font-variant: small-caps;

}

So where to put all this CSS code? No need to put it at the top of every chapter (if you have separate html pages for each chapter). Just open up your stylesheet.css file and put it in there. You only need to put CSS code at the top of a page if you want that page to be different than other pages; your master stylesheet is the default styling for all of your pages.

Hope this helps! If you have any questions, feel free to ask, or if I could have made the code even leaner, let me know.