How to Make an Amazon Kindle Book using HTML and CSS

UPDATE 5/9/2022: Read at your own risk! This article is out of date and likely will not work in making a Kindle book in 2022. It might still provide interesting history and useful concepts so I’m keeping it up for posterity.

UPDATE 12/19/2017: I hope this post gets you up and running quickly. For a deep dive with far more details I recommend buying this book: The eBook Design and Development Guide by Paul Salvette. It goes into great detail and covers so much more than I could in one short post.

I’m going to show you how to make a Kindle ebook using HTML 5 and CSS 3. This tutorial cuts through a lot of the confusion out there by providing a step-by-step recipe and the boilerplate Kindle files you’ll need so you can start making your own Kindle books within less than 10 minutes. Amazon’s KF8 (Kindle Format 8) opens up new opportunities for designers by supporting all the wonders of CSS 3 and HTML 5 on Kindle devices. It’s an exciting (and, yes, still nascent) time for electronic book designers and I hope this tutorial gets you up and running.

I run Perry Garvin Studio, a design firm in Brooklyn, New York and we specialize in Kindle book design, publishing, and conversion, web design, user interface design, branding, and development. Learn more about us at and email if you need help with your project.

Also, note that this article has translated into Serbo-Croatian by Vera Djuraskovic.


Step 1: What You Need to Know

This tutorial is written for people using Macs. If you’re on a PC, keep reading, but you’re going to have to be on a Mac to make this recipe work. Check out one of the comments below for advice on how to get this to work on a Windows machine. It will also be helpful if you know HTML 5 and CSS 3 and are familiar with XML. And we’re going to do a little stuff in Terminal. Some people get nervous when the command line is involved, but don’t worry. Stick with me and you’ll be fine.

Step 2: The Big Picture

To make a Kindle book, you assemble a bunch of files and run them through Amazon’s processing engine called KindleGen. The file that pops out is a .mobi file. That’s the file that gets dropped onto your Kindle for reading.

Step 3: The Files

First, you need to make the files that comprise the book.

1) Download this ZIP of sample files that I’ve made for you

2) Unzip it and put the resulting folder called “My Kindle Book” on your Desktop

3) Trash the ZIP file

4) Open that folder and let’s go through these files one-by-one.


This is the cover of your book.


This is the content of your book — what your readers will read. Keep the HTML simple and refer to Amazon’s documentation for details on how they want you to write your markup.


This is the table of contents. You’ll see that each link points to a part of the Kindle book using anchor points.


This is your stylesheet and it’s how you’ll design your book using CSS 3. I’ve styled my book so text is green (cripes) and images float to the right. Amazon’s support for CSS 3 is relativelu new and pretty darn exciting because of the new design options it brings. You can learn more about the CSS 3 tags Amazon supports on its various devices here.


This is an XML file that tells the Kindle how your book is structured. Go ahead and open it up (you can use TextEdit if you don’t have a code editor).

The stuff between the <metadata> tags defines the metadata for the book using standard Dublin Core elements: title, creator, date, etc.

The stuff between the <manifest> tags tells Kindle where things are. For example, you’ll see that it has references to all the files we’re currently reviewing: the cover image, the book HTML file, the table of contents HTML file, the stylesheet, and the NCX file (I’ll explain that in a moment).

The stuff between the <spine> tags tells Kindle the order of how those HTML files should be read. Using this file, for example, when you open your book on a Kindle you’ll first hit the table of contents. Then you’ll hit the book contents. See how the “idref” in the <spine> elements match the “id” in the <manifest> elements? That’s how the spine knows what HTML files to present. That matching is required, of course, otherwise Kindle won’t know what to load. You can create multiple HTML files and define the order they will be accessed in the <spine>. Be sure to also make reference to those HTML files in your <manifest> so that Kindle knows where they are located!


You know that bar along the bottom of a Kindle that has points that allow you to skip to various parts? The NCX file tells Kindle where those points are. The <navPoint> elements within the <navMap> tags define those points.

I also put a folder called “img” in the download and I threw in a nice de Kooning picture that you’ll see embedded in mykindlebook.html file.

And that’s it. These are the minimum files you need to build a Kindle book. So what’s next?

Step 4: Putting it all together

Go through this with me step by step:

  1. Zip the “My Kindle Book” folder by right clicking on it and selecting “Compress My Kindle Book”.

You just made your Kindle book!

Let’s look at it.

The easiest way is to download Amazon’s Previewer application which is a software version of a Kindle. You can get it here:

Once you’ve downloaded Previewer, open it up and go to File > Open and select your .mobi file from your Desktop. And there you have it: your Kindle book. You can also drag and drop the .mobi file onto your Kindle and read it there.

Something doesn’t look right? Typo perhaps? Well, you’ll have to trash your .mobi file and your .epub file and repeat Step 2.

Step 5: Final Thoughts

Here are a few helpful links:

Amazon’s Kindle Publishing Guidelines : The official Amazon guidelines on how they’d like you to produce your Kindle books. It’s full of all sorts of geeky details which will help you craft the perfect files.

About Kindle Format 8 : Amazon’s new file format for its Kindle devices

About KindleGen : Amazon’s application for producing .mobi files

About Amazon Previewer — Amazon’s application software for previewing how Kindle books look

Good luck!

Perry Garvin Studio



Artist and designer in Brooklyn, New York. Systems builder and chance operator.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store