CSS for EPUB Files
EPUB CSS is not the same as browser CSS. E-readers support a limited subset of CSS — and override many properties based on reader settings for font size, color theme, and line spacing. Writing CSS for ebooks means providing reliable baseline styles while accepting that readers control the final rendering. This guide covers the properties that work consistently, the ones to avoid, and the standard patterns for ebook typography.
How EPUB CSS works differently from browser CSS
In a web browser, your CSS controls the page. In an e-reader, your CSS is one input among several — the reading system applies its own default styles, the reader's chosen font and font-size override yours, and night mode or sepia themes change colors regardless of what you set. This is by design: ebook readers exist to give readers control over their reading experience.
Kindle adds another layer: KDP converts EPUB to an internal format during processing. Your CSS is reinterpreted rather than rendered directly. Some properties survive the conversion intact; others are dropped or transformed. Apple Books renders EPUB more directly, closer to a browser environment. Kobo and other readers sit at various points in between.
The practical rule: write CSS that establishes good defaults for readers who have not changed their settings, and avoid relying on any property that a reader could legitimately override — colors, fonts, and font sizes especially.
Paragraph styles
Paragraph styling is the most important CSS decision in an ebook. The standard book-typography pattern is first-line indent with no space between paragraphs — not the web convention of space between paragraphs and no indent. Apply this globally and remove the indent from the first paragraph after each heading:
/* Standard book paragraph style */
p {
margin: 0;
padding: 0;
text-indent: 1.5em;
line-height: 1.6;
text-align: left;
}
/* No indent for first paragraph after heading */
h1 + p,
h2 + p,
h3 + p {
text-indent: 0;
}
/* Block quotes — indent the whole element */
blockquote {
margin: 1em 2em;
text-indent: 0;
}The adjacent sibling selector (h1 + p) removes the indent from the paragraph directly after a heading. Support for this selector varies across older reading systems — if your target audience includes older Kobo or NOOK devices, test this pattern specifically.
Heading styles
Chapter titles are typically h1 elements. Use centered alignment and enough top margin to visually separate them from preceding content. Most e-readers also apply their own heading styles, so these values are defaults that can be overridden:
h1 {
font-size: 1.5em;
font-weight: bold;
text-align: center;
margin-top: 2em;
margin-bottom: 1.5em;
line-height: 1.3;
page-break-before: always; /* start on new page */
}
h2 {
font-size: 1.2em;
font-weight: bold;
text-align: left;
margin-top: 1.5em;
margin-bottom: 0.5em;
}
h3 {
font-size: 1em;
font-weight: bold;
text-align: left;
margin-top: 1em;
margin-bottom: 0.25em;
}Page breaks between chapters
In EPUB, each chapter is a separate XHTML content file — the spine in the OPF declares the reading order. Within a single content file, you can also force a page break using CSS:
/* Force a new page before the element */
.chapter-title {
page-break-before: always;
}
/* Prevent a break inside an element */
.no-break {
page-break-inside: avoid;
}If your EPUB splits each chapter into its own XHTML file — which is the recommended structure — the reading system automatically starts each file on a new page. CSS page breaks are mainly useful when multiple sections exist within a single content file.
CSS properties — what works and what to avoid
| Property | Support | Notes |
|---|---|---|
| font-family | Supported | Readers may override with their chosen font. Use as a suggestion, not a guarantee. |
| font-size (em / %) | Supported | Use em or % — not px. Pixel values can block reader font-scaling on some platforms. |
| font-weight: bold / normal | Supported | Numeric weights (400, 700) work in most readers; avoid values like 300 or 600 where rendering is inconsistent. |
| font-style: italic / normal | Supported | |
| text-align | Supported | left, center, right, justify all work. justify can produce uneven spacing on narrow e-ink screens. |
| text-indent | Supported | Standard method for paragraph first-line indent. Use em units. |
| line-height | Supported | Unitless values (e.g., 1.5) are most reliable across reading systems. |
| margin / padding | Supported | Use em units. Large pixel margins behave unpredictably on small screens. |
| color | Supported | May be overridden by reader color/contrast/night mode settings. |
| background-color | Variable | Often overridden by reader themes. Do not rely on background color to convey meaning. |
| page-break-before / after | Supported | Reliable for forcing chapter starts onto a new page. Use on h1 elements. |
| display: block / inline | Supported | |
| display: flex / grid | Avoid | Support varies significantly across reading systems. Not suitable for primary layout. |
| @font-face (custom fonts) | Platform-specific | Subject to platform-specific embedding rules. Check current KDP and Apple Books documentation. |
| CSS custom properties (--var) | Avoid | Not supported in older reading systems and some current e-readers. |
| CSS transitions / animations | Not supported | E-reader environments do not run CSS animations. |
| @media queries | Limited | Support is inconsistent across reading systems. Avoid for critical layout decisions. |
Linking CSS to your EPUB content files
Each XHTML content file in your EPUB links to the stylesheet via a standard <link> element in the <head>:
<!-- In each chapter XHTML file's <head> -->
<link href="../Styles/style.css" rel="stylesheet" type="text/css"/>The CSS file must also be declared in the OPF manifest:
<!-- In content.opf, inside <manifest> -->
<item id="stylesheet"
href="Styles/style.css"
media-type="text/css"/>A CSS file present in the EPUB archive but not listed in the OPF manifest will not cause a validation error, but it may be ignored by some reading systems. Always declare it in the manifest.
Frequently asked questions
Can I use Flexbox or CSS Grid in my EPUB?
Support for Flexbox and Grid varies significantly across reading systems and is generally unreliable. Kindle, older Kobo devices, and some e-ink readers have limited or no support for these layout models. For reliable results across all platforms, use block-level layout — standard div, p, and heading elements with margin and padding — rather than Flexbox or Grid.
Can I embed custom fonts in an EPUB?
EPUB supports font embedding via @font-face, but each platform has its own rules for how embedded fonts are handled. Readers can override fonts at the system level regardless. Platform-specific font obfuscation requirements, licensing restrictions, and the reader's own font settings all affect whether a custom font actually renders. If font rendering is critical to your design, check current documentation for each platform you are publishing to.
Why does my EPUB look different on Kindle versus Apple Books?
Kindle converts EPUB to its own internal format during processing — CSS is reinterpreted, not rendered directly. Apple Books renders EPUB closer to a browser environment. Kobo sits between the two. Each reading system applies its own default styles on top of yours. This is why EPUB CSS is always about providing suggestions that reading systems apply within their own rendering rules, not controlling exact visual output the way a web page controls a browser.
Should I use px, em, or % for font sizes?
Use em or % — not px. Pixel font sizes can interfere with the reader's own font-scaling controls on some platforms, meaning readers who increase font size in their device settings may not see the change take effect. em values scale with the reader's base font size, which is the correct behavior for accessible ebook typography.
How do I prevent the first paragraph of a chapter from being indented?
Use the adjacent sibling selector: h1 + p { text-indent: 0; }. This removes the indent from the first paragraph immediately after an h1 heading — the standard typographic convention for book layout. Apply the same rule for h2 + p if your book has section headings. Note that not all e-readers support the adjacent sibling selector; test in your target platforms if this detail is important to your design.
Can I use CSS to add a drop cap to the first chapter paragraph?
Drop caps via CSS (using ::first-letter with float: left and a large font-size) have inconsistent support in e-readers. Some reading systems render them correctly; others produce layout breaks or ignore the styles. If you include a drop cap, test it in Kindle Previewer and any other target platform before publishing. If cross-platform consistency matters more than the drop cap effect, skip it.
For the full EPUB build workflow — manuscript cleanup, TOC, metadata, and platform submission — see the EPUB formatting guide. For EPUB nav.xhtml and toc.ncx — the navigation documents that store TOC entries — see the EPUB TOC guide. For how chapter breaks in your content files relate to EPUB spine structure, see chapter breaks in EPUB.
For Kindle-specific EPUB structure and formatting requirements, see the Kindle EPUB format guide.
For font selection decisions — which typefaces to embed, licensing (OFL vs commercial), and subsetting — see the fonts in EPUB files guide. That page covers the design-decision layer; this page covers the CSS syntax.
Generate CSS snippets for common EPUB formatting patterns.
Paragraph indent, drop caps, blockquote styles, heading layouts — copy correct EPUB CSS directly into your stylesheet.
Open CSS Snippet Generator →