Introduction to CSS for the Kindle Fire and Applying a Stylesheet

Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.

Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.


Previous Post: Hyperlinks

Introduction to CSS for the Kindle Fire

Up until now in the guide, you have learned about using HTML markup to add content into your eBook. While nothing is more important than the actual written word, fixing it up with typographical best practices is a way to show your readers that your eBook is professional. Cascading Style Sheets (or CSS) is a way to add presentation to your eBook's content. This is accomplished by applying different rules, which are called declarations, to elements within your HTML that alter how the marked-up content appears to the reader.

As an example, here is an image of three different paragraphs that each has its own presentation or style:

Three Paragraphs Styled Differently

You will notice that the first paragraph is indented on the first line, the second has a different font, and the third is fully justified (aligned on both sides) rather than left-justified (aligned on the left side only). While the differences may be somewhat trivial, utilizing different styles can aid the reader in focusing their attention on certain portions of content and giving your eBook a professional look.

During the early years of web development, it became a fundamental axiom to separate content (HTML) and presentation (CSS) from each other. This is because many elements of content on a given website have the exact same type of styling, and it is much easier to change the code in a single CSS file than alter every single element of the HTML.

As an eBook designer, it is even more important to separate presentation and content. What if you had dozens of paragraphs indented the same way in a lengthy novel, and you wanted to make a small modification to each of those indents? If your presentation was coded into the HTML, you would have to go through each paragraph tag and make the necessary changes. If you're like the author, you would probably make one or two mistakes along the way resulting in some goofy indents on those paragraphs. For CSS you only have to make one change to alter the indents on all of these paragraphs. Do yourself a favor and save a vast amount of time by learning CSS.

In regards to the Kindle format, CSS can be used to apply styles specifically for the older e-ink Kindles or the Kindle Fire without changing the HTML. This is handy, because the Kindle Fire can support more advanced CSS (such as floating images and drop caps) that would create problems on the older Kindles. You can even completely hide content on the e-ink Kindles that would appear on the Kindle Fire, and vice versa. The new CSS3 specification is powerful and supports a variety of complex features such as box shadows, rounded corners, and even animation. It is recommended that you learn the easier ways to style CSS (such as changing the font size) and then work your way onto the complexities.

Applying a Stylesheet

There are three basic ways to apply CSS presentation to your HTML, and only one is recommended--using an external stylesheet with a .css file extension. However, you should be aware of the other two methods.
As an example, we would like to apply the following CSS, which makes any content in a <p> element be left-justified:

p {text-align: left;}

The first approach is to include it within the head portion of the HTML. The CSS will be enclosed within the <style> element as follows:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<title>Your Title Here</title>

<style type="text/css">

p {text-align: left;}

</style>

</head>

<body>

<p>My first paragraph that is aligned to the left. Hopefully my CSS will work.</p>

<p>My second paragraph that is left-justified. There is some debate over whether left-justified or fully-justified text is better in eBooks. It's hard to say. To each their own.</p>

</body>

</html>

The second approach, and the one that is not recommended at all, is to add the CSS style directly into the HTML as an attribute. This is accomplished by using style="some css" within the tag of an HTML element (be sure not to use the curly braces). To style the two paragraphs, the HTML would look as follows:

<p style="text-align: left;">My first paragraph that is aligned to the left. Hopefully my CSS will work.</p>

<p style="text-align: left;">My second paragraph that is left-justified. There is some debate over whether left-justified or fully-justified text is better in eBooks. It's hard to say. To each their own.</p>

This method is not recommended, since the major benefit of utilizing CSS is to not have to rewrite dozens of lines of code. Using the style attribute requires you to make changes within every HTML element you want to change.

The final approach and the one recommended by this guide is using an external stylesheet. Simply create a new file in your text editor called anyname.css. The content of the CSS file would simply be one line of text in this case:

CSS File Example with Color-Coded Syntax

If you are using a good text editor like Notepad++, the syntax formatting and coloring will appear different than the HTML file. This is extremely useful for troubleshooting.

To reference the CSS file for a particular HTML file, you simply add a link element into the head section of the HTML. An example is as follows:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Your Title Here</title>
<link type="text/css" rel="stylesheet" href="mystylesheet.css" />
</head>
<body>
<p>My first paragraph that is aligned to the left. Hopefully my CSS will work.</p>
<p>My second paragraph that is left-justified. There is some debate over whether left-justified or fully-justified text is better in eBooks. It's hard to say. To each their own.</p>
</body>
</html>

This method of using an external stylesheet is recommended, because you can use the same stylesheet for numerous HTML files and the syntax is color-coded differently for advanced text editors.

Tip: You can keep the CSS file in a different directory and reference it in the link element using a relative path to the HTML file. This is considered a good practice. For example linking to a directory called cssfiles that is in the same directory as the HTML file would have the href="cssfiles/mystylesheet.css" attribute. Linking to the CSS file in the parent directory of the HTML file would have the href="../mystylesheet.css" attribute.

Next Post: Selectors and Declarations

Introduction to CSS for the Kindle Fire and Applying a Stylesheet