Inside the ePub Format: The CSS file

In this post, I discuss the importance of css (or cascading style sheets) in your eBook. As with all other posts, ePub and Kindle are essentially the same.

As you may recall from my original post in this series, you learned your content files (your eBook) is just a web page that displays text and media content. The web page your eBook displays is called a xhtml file.

If you want your book to have a unique look-and-feel, you need to create a stylesheet for it. In this article, I show you how to incorporate css styles into your eBook.

How css works

The idea behind a xhtml file (your content), is to remove as much styling as humanly possible and place that into a separate css file. To explain this, let’s use an example.

Let’s say you want every chapter heading (the h1 — or heading 1 tag) to be bold, blue, and centered, like this:

Chapter 1: The Beginning

With standard html (non-xhtml) you would write something that looks like this:

[html] <h1 style="text-align: center;">
  <span style="color: #0000ff;">
    <strong>Chapter 1: The Beginning</strong>

With xhtml (the ePub standard), you need a css file that is outside the xhtml file and the defines how to display that H1 (heading 1) style.

First, you create a text file with the extension .css, like mybookstyle.css. Inside that css file, you will add some text that looks something like this:

[css] h1
  text-align: center;

Then in your xhtml content file, you add a line that looks like this in the <head> section:

[html] <head>
<link rel="stylesheet" type="text/css" href="css.css" />
<other head items…>

Finally, to add a heading to your xhtml file itself, you will have a line like this:

[html] <h1>Chapter 1: The Beginning</h1>[/html]

Notice how the xhtml file just displays the h1 tag? When the eBook reader opens the file, it will load your css file and will know the h1 tag needs to display as blue, bold, and centered. It also makes your xhtml file really clean because all that styling in the html example is gone, making the xhtml file much easier to read.

To be fair, xhtml is not so rigid you cannot add any styling at all, but the benefits of using css files are really apparent. Let’s say you change your mind last minute and want the chapter heading to be green, underlined, and not bold. In that example, you simply change the css file and all the xhtml files associated with them will change automatically.

How many css files?

Even though your content may span across multiple files, your eBook should have a consistent look-and-feel throughout. For example, you should not use a black font in one chapter and purple in another. You will confuse the reader. You should create one single css file for all your core content.

The reason I used the word core content in the previous paragraph is that there is the navigation document (or table of contents file) may need its own css file. The table of contents needs to be easily accessible for touch screens, so you might want to increase the spacing between lines. Maybe your book left-justifies the chapter headings, but in the navigation file, you want the words “Table of Contents” to be centered on the screen.

You only need one css file, but I recommend you create two. One that all your content files use and another for the navigation document.

Summary (and a word of hope)

At the end of the day, you are probably using a word processor to write your eBook. That word processor generally takes care of the css formatting for you. I rarely ever touch the css file. If I do not like something, I modify the style in my word processor, and it outputs the css for me.

Learning css has helped me in more ways than one. For example, I now know how to adjust the look and feel of this WordPress site because nearly everything on this post you are reading uses css and I have changed quite a bit of it. The website is a great place to start learning css.

Even if you never touch a css file, I hope this article gets you thinking about how to use styles within your word processing software to more efficiently make bulk changes to your eBook.


Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.