BB eBooks Banner


CSS Boilerplate for eBooks


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==*/
comments powered by Disqus

Newsletter

Sign Up for the BB eBooks newsletter to receive design tips, marketing assistance, eBook industry news, and promotions.

Get a free PDF copy of the BB eBooks tips on where and how to self-publish when you sign up.

Name:

Email:
Sign Up

Testimonials

Notable Quotables

Search BB eBooks

Substance B

Substance B Logo

Substance B is a unique platform where authors can connect directly with their readers by providing free samples of their eBooks, links to all their titles, personalized eBooks with signature, text, and even photos to friends, fans, and reviewers.

PayPal Verified

Official PayPal Seal for BB eBooks

BB eBooks is PayPal verified, so our valued clients can trust us with all their transactions.

eBooks For Sale

The eBook Design and Development Guide

eBook Design Development Guide Cover

Learn how to design, develop, and create an eBook like a pro for all markets. Available at Amazon for $6.99.

Maximizing Your BookBub Promotion

Maximizing Your BookBub Promotion Mini Cover

Learn more about to utilize BookBub to promote your books. Available for free at Amazon, Smashwords, and Substance B.

America Goes On

America Goes On Cover

The story of a Marine who returns from Iraq to confront an America that doesn’t respect his sacrifice. Available at Amazon, B&N, and Smashwords for $0.99.

The Sentinel in Sector 5: A Novella

Sentinel in Sector 5 Cover

A young student plays a game to see how the Former World collapsed 500 years ago. A sci-fi novella available at Amazon for $2.99.