This post is part of So You Want to Make an eBook?. I’m releasing this book in sections on my blog, but when it’s all finished I will offer the whole thing as a single eBook. Everyone who donates toward its production (use the coffee cups to the right, note that it’s because of this effort) will get a free copy of this eBook. You can find all the posts here.
Creating the CSS Stylesheet
As I switched from using straight HTML, one of the hardest things for me to learn was to use CSS. CSS – or Cascading Style Sheets – separate out the style from the content. It is powerful, in that you can change the entire look and feel of an entire website (or eBook) by changing a few variables. That also means you can screw up the look of an entire website or eBook by changing a few variables.
This is why backups are so important – it helps you figure out what you did wrong. And you will do something wrong.
I’ve provided the file style.css in the sample pack (it’s also below as plain text for you to cut and paste). One thing that helps me is making the style designations mirror the HTML code as much as possible. Class "u", for example, is much more intuitively an underline than class "c23". We’ll go through the stylesheet quickly, to explain what each element is. Look at them and see what’s different about each one, and it should come clear pretty quickly.
Two things to note: Sigil, when it automatically converts, puts the CSS styles in the header of each section. This means that if you want to change one bit across your document, you’ve got to change all of them. Calibre, when it converts, makes dozens upon dozens of styles that essentially do the same thing. Both are icky practice.
Also, I use left-aligned (sometimes called “ragged right”) paragraphs. Because of the way reflowable text works, you might otherwise end up with some really strange spacing. Again, a ragged right isn’t really noticeable – but something wrong like three words on a line (with a huge amount of space between words) is immediately noticeable.
body – This defines the margins for the entire "body" section of the work. I only set margins here.
p – This defines the default characteristics for every paragraph. It indents the first line, left-aligned, tells it what font to use, and how large to make it. Every different paragraph declaration must be explicitly defined. I like Times New Roman for reading, and a little extra whitespace between paragraphs.
.first – If you want a paragraph (usually the first in a chapter) to not be indented.
.center – If you need something (a title, or chapter heading) to be centered.
.blockquote – If you need something (say, a quotation) to be indented more from the main text.
.pagebreak – If you need a forced page break (see below)
a – For hyperlinks (the same goes with the a[href])
.i – For italics
.b – For bold
.u – For underline
.sup – For superscript
.strike – For strikethrough
.title – For titles – centered, large-ass font.
.by – For bylines – centered, somewhat large font.
.bio – I use this for biography areas of anthologies, such as in The Crimson Pact, or when I need a section of text to be offset, like the time/date headers in the Eden anthologies I just worked on.
A note about fonts: Take a look at this section:
font-family:"Times New Roman",Times,serif;
This gracefully degrades from what you specifically want to the closest match. If the eReader does not have Times New Roman, it will then try Times, then will find any serif font. Likewise with this section for sans-serif fonts:
font-family:"Verdana",Arial,sans-serif
Make sure that any font definitions you have end with either serif or sans-serif to ensure maximum compatibility.
If you want to be creative, you can mix and match these, add more, and so on. The lower rule takes precedence, which is why the "default" paragraph style is above the centered paragraph style.
Also, as a cautionary note, when you start trying to mash a bunch of style definitions together it becomes much more complex to fix when (yes, when) you make a mistake. If you want, try changing some of the variables (like the "margins") to see what they do.
So now that you know what to look for, it’s time to search and replace again (and you’ll see how these styles are used at the same time). We’ll do that next time.
The CSS sheet data (taken from a real production environment!) is in between the two lines.
body{margin-left:30px;margin-right:30px}
p{text-indent:0.3in;font-family:"Times New Roman",Times,serif;font-size:100%;margin-top:0.01in;margin-bottom:0.01in;}
.first{text-indent:0;}
.center{text-indent:0;margin-left:0;text-align:center;}
.title{text-indent:0;margin-left:0;text-align:center;font-weight: bold;font-size:120%;margin-top:0.2in;margin-bottom:0.2in;}
.by{text-indent:0;margin-left:0;text-align:center;margin-top:0.2in;margin-bottom:0.2in;}
.blockquote{text-indent:0.25in;margin-left:0.25in;margin-right:0.25in;}
.pagebreak{text-indent:0;margin-left:0;text-align:center;page-break-before:always;}
.right{text-align:right;}
.bio{text-align:left;text-indent:0;font-family:"Verdana",Arial,sans-serif;font-size:90%;}
a {color: inherit; text-decoration: inherit; cursor: default;}
a[href] { color: blue; text-decoration: underline; cursor: pointer;}
.i {font-style: italic;}
.b {font-weight: bold;}
.u {text-decoration: underline;}
.sup{ vertical-align: super;}
.strike{text-decoration: line-through;}
This post was part of So You Want to Make an eBook?. I’m releasing this book in sections on my blog, but when it’s all finished I will offer the whole thing as a single eBook. Everyone who donates toward its production (use the coffee cups to the right, note that it’s because of this effort) will get a free copy of this eBook. You can find all the posts here.