BB eBooks – CSS Boilerplate

The eBook Design and Development Guide

eBook Design Development Guide Cover

For complete access to all the templates, tips, and tricks that BB eBooks uses for eBook production, please consider buying the eBook Design and Development Guide at Amazon for only $6.99. In it you will find comprehensive HTML, CSS, and Regular Expression tutorials, as well as a step-by-step workflow for turning a sloppy manuscript into a beautiful eBook that is only available in this guide. A PDF version is available upon request following purchase.

EPUB 2 Stylesheet

This stylesheet will work for all EPUB eBooks. For the Kindle, please see below. Suggestions and feedback are always welcome.

/* BB eBooks BoilerPlate EPUB */
/* Modify as Needed */
/* NOT SUITABLE for Kindle */
/* visit us @ http://bbebooksthailand.com/developers.html */

/* This adds margins around every page to stop ADE's line numbers from being superimposed over content  */
@page {margin: 10px;}

/*===Reset code to prevent cross-reader strangeness===*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

table
{
border-collapse: collapse;
border-spacing: 0;
}

ol, ul, li, dl, dt, dd
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

/*===GENERAL PRESENTATION===*/

/*===Body Presentation and Margins===*/
/* Text alignment is still a matter of debate. Feel free to change to text-align: left; */
body
{
text-align: justify;
line-height: 120%;
}


/*===Headings===*/
/* After page breaks, eReaders sometimes do not render margins above the content. Adjusting padding-top can help */


h1
{
text-indent: 0;
text-align: center;
margin: 100px 0 0 0;
font-size: 2.0em;
font-weight: bold;
page-break-before: always;
line-height: 150%; /*gets squished otherwise on ADE */
}

h2
{
text-indent: 0;
text-align: center;
margin: 50px 0 0 0;
font-size: 1.5em;
font-weight: bold;
page-break-before: always;
line-height: 135%; /*get squished otherwise on ADE */
}

h3
{
text-indent: 0;
text-align: left;
font-size: 1.4em;
font-weight: bold;
}

h4
{
text-indent: 0;
text-align: left;
font-size: 1.2em;
font-weight: bold;
}

h5
{
text-indent: 0;
text-align: left;
font-size: 1.1em;
font-weight: bold;
}

h6
{
text-indent: 0;
text-align: left;
font-size: 1.0em;
font-weight: bold;
}

/* Hyphen and pagination Fixer */
/* Note: Do not try on the Kindle, it does not recognize the hyphens property */
h1, h2, h3, h4, h5, h6
{
-webkit-hyphens: none !important;
hyphens: none;
page-break-after: avoid;
page-break-inside: avoid;
}

/*===Paragraph Elements===*/
/* Margins are usually added on the top, left, and right, but not on the bottom to prevent certain eReaders not collapsing white space properly */

/*first-line indent paragraph for fiction*/
p
{
text-indent: 1.25em;
margin: 0;
widows: 2;
orphans: 2; 
}

/* block type paragraph for non-fiction* /
/*
p
{
text-indent: 0;
margin: 1.0em 0 0 0;
widows: 2;
orphans: 2;
}
*/

/* for centered text and wrappers on images */
p.centered
{
text-indent: 0;
margin: 1.0em 0 0 0;
text-align: center;
}

/* section Breaks (can use centered-style for non-fiction) */
p.centeredbreak
{
text-indent: 0;
margin: 1.0em 0 1.0em 0;
text-align: center;
}

/* First sentence in chapters following heading */
p.texttop
{
margin: 1.5em 0 0 0;
text-indent: 0;
}

/* Use for second sentence to clear drop cap's float */
p.clearit
{
clear: both;
}

/* 1st level TOC */
p.toctext
{
margin: 0 0 0 1.5em;
text-indent: 0;
}

/* 2nd level TOC */
p.toctext2
{
margin: 0 0 0 2.5em;
text-indent: 0;
}


/*==LISTS==*/
ul
{
margin: 1em 0 0 2em;
text-align: left;
}

ol
{
margin: 1em 0 0 2em;
text-align: left;
}

/*===IN-LINE STYLES===*/
/* Recommend avoiding use of <b>, <i>, and <u>. Use span tags instead */
span.i
{
font-style: italic;
}

span.b
{
font-weight: bold;
}

span.u
{
text-decoration: underline;
}

span.st
{
text-decoration: line-through;
}


/*==in-line combinations==*/
/* Using something like <span class="i b">... may seem okay, but it causes problems on some eReaders */
span.ib
{
font-style: italic;
font-weight: bold;
}

span.iu
{
font-style: italic;
text-decoration: underline;
}

span.bu
{
font-weight: bold;
text-decoration: underline;
}

span.ibu
{
font-style: italic;
font-weight: bold;
text-decoration: underline;
}

/* This fixes the bug where the text-align property of block-level elements is not recognized on iBooks 
 example: html markup would look like <p class="centered"><span class="ipadcenterfix">Centered Content</span></p> */

span.ipadcenterfix
{
text-align: center;
}

/*==IMAGES==*/
img
{
max-width: 100%;
}

/*==TABLES==*/
table
{
margin: 1.0em auto;
}

tr, th, td
{
margin: 0;
padding: 2px;
border: 1px solid black;
font-size: 100%;
vertical-align: baseline;
}

/* Superscripted Footnote Text */
.footnote
{
vertical-align: super;
font-size: 0.75em;
text-decoration: none;
}


/*==DROP CAPS==*/
span.dropcap {
font-size: 300%;
font-weight: bold;
height: 1em;
float: left;
margin: 0.3em 0.125em -0.4em 0.1em;
}

/*==PULL QUOTE==*/
div.pullquote
{
margin: 2em 2em 0 2em;
text-align: left;
}

div.pullquote p
{
font-weight: bold;
font-style: italic;
}

div.pullquote hr
{
width: 100%;
margin: 0;
height: 3px;
color: #2E8DE0;
background-color: #2E8DE0;
border: 0;
}

/*==BLOCK QUOTE==*/
div.blockquote
{
margin: 1em 1.5em 0 1.5em;
text-align: left;
font-size: 0.9em;
}

/*==eBook Specific Formatting Below Here==*/

Kindle Stylesheet

This stylesheet will work for both MOBI (older e-ink Kindles and Kindle apps) as well as the new KF8 format. It uses the @media query to distinguish between the formats.

/* BB eBooks BoilerPlate Kindle for MOBI 7 and KF8*/
/* Modify as Needed */
/* visit us @ http://bbebooksthailand.com/developers.html */

/*===Reset Code===*/
html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, center, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

/* Do Not reset ol, ul, or table for MOBI 7. It blows out all styling */

/*===GENERAL PRESENTATION===*/
/*===Body Presentation and Margins===*/
body
{
text-align: justify;
line-height: 120%;
}

/*===Headings===*/
/* After page breaks, Kindle does not render margins above the content unless there is a file split in the package. */
h1
{
text-indent: 0;
text-align: center;
margin: 100px 0 0 0;
font-size: 2.0em;
font-weight: bold;
page-break-before: always;
}

h2
{
text-indent: 0;
text-align: center;
margin: 50px 0 0 0;
font-size: 1.5em;
font-weight: bold;
page-break-before: always;
}

h3
{
text-indent: 0;
text-align: left;
font-size: 1.4em;
font-weight: bold;
}

h4
{
text-indent: 0;
text-align: left;
font-size: 1.2em;
font-weight: bold;
}

h5
{
text-indent: 0;
text-align: left;
font-size: 1.1em;
font-weight: bold;
}

h6
{
text-indent: 0;
text-align: left;
font-size: 1.0em;
font-weight: bold;
}


/*===Paragraph Elements===*/
/* Margins are usually added on the top, left, and right, but not on the bottom to prevent Kindle not collapsing white space properly */

/*firstline indent for fiction*/
p
{
text-indent: 1.25em;
margin: 0;
}

/*block indent for non-fiction*/
/*
p
{
text-indent: 0;
margin: 1.0em 0 0 0;
}
*/

/* for centered text and element wrappers on images*/
p.centered
{
text-indent: 0;
margin: 1.0em 0 0 0;
text-align: center;
}

/* section Breaks (can use centered-style for non-fiction) */
p.centeredbreak
{
text-indent: 0;
margin: 1.0em 0 1.0em 0;
text-align: center;
}

/* First sentence in chapters following heading */
p.texttop
{
margin: 1.5em 0 0 0;
text-indent: 0;
}

/* 1st level TOC */
p.toctext
{
margin: 0 0 0 1.5em;
text-indent: 0;
text-align: left;
}

/* 2nd level TOC */
p.toctext2
{
margin: 0 0 0 2.5em;
text-indent: 0;
text-align: left;
}

/*==IMAGES==*/


/*===IN-LINE STYLES===*/
span.i
{
font-style: italic;
}

span.b
{
font-weight: bold;
}

span.u
{
text-decoration: underline;
}

span.st
{
text-decoration: line-through;
}

/*==in-line combinations==*/
/* Using something like <span class="i b">... may seem okay, but it causes problems on the Kindle */
span.ib
{
font-style: italic;
font-weight: bold;
}

span.iu
{
font-style: italic;
text-decoration: underline;
}

span.bu
{
font-weight: bold;
text-decoration: underline;
}

span.ibu
{
font-style: italic;
font-weight: bold;
text-decoration: underline;
}


/* Superscripted Footnote Text */
.footnote
{
vertical-align: super;
font-size: 0.75em;
text-decoration: none;
}


/*==KF8 specific here ==*/

@media amzn-kf8{ 

span.dropcap {
font-size: 300%;
font-weight: bold;
height: 1em;
float: left;
margin: -0.2em 0.1em 0 0.1em;
}

p.clearit
{
clear: both;
}

ol, ul, li, dl, dt, dd 
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

/*==Lists ==*/
ul
{
margin: 1em 0 0 2em;
text-align: left;
}

ol
{
margin: 1em 0 0 2em;
text-align: left;
}

table
{
border-collapse: collapse;
border-spacing: 0;
margin: 1.0em auto;
}

tr, th, td
{
margin: 0;
padding: 2px;
border: 1px solid black;
font-size: 100%;
vertical-align: baseline;
}

} /* End KF8 Specific Styles */

/*==e-ink Kindle Specific==*/
@media amzn-mobi{

/* pseudo dropcaps for e-ink Kindles */
span.dropcap {
font-size: 1.5em;
font-weight: bold;
}

} /* End e-ink Kindle Specific Styles */

/*==eBook Specific Formatting Below Here==*/

CSS Boilerplate for eBooks

The eBook Design and Development Guide

EPUB 2 Stylesheet

Kindle Stylesheet