Paul Salvette in Bangkok: March 2012

March 26, 2012

CSS Selector Tutorial for eBooks

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: Introduction to CSS

Cascading Style Sheets allow the eBook designer to assign presentational rules to content within an HTML file. It is possible to assign rules that make the entire text of the eBook bold, italicized, or a different color, but this isn't very useful. You are probably interested in defining presentation that affects only certain paragraphs or words within your eBook. CSS assigns specific declarations based on a system of selectors that explicitly limits the presentation to certain elements within your HTML.

CSS Selectors come in three basic flavors:

Selection of types of HTML elements
Selection of HTML that has been assigned a class with the class attribute
Selection of HTML that has been assigned a unique identifier with the id attribute

The CSS syntax can be broken down into two parts: the selector(s) and the declaration(s). Furthermore, each declaration is divided into a property, which defines what type of presentation the CSS will be altering, and a value, which defines how that type of presentation will behave. As an example, say we wanted to change any content within to be bold and blue. The CSS would appear as follows:

Basic CSS Syntax

Important Note: Declarations always have a semi-colon (;) at the end of them. The curly braces ({ and }) enclose one or more declarations immediately following a selector. You can have all of your CSS declarations on one line, but placing them on multiple lines makes the CSS more human-readable.

The dot (.) separates the p and the myclass to form a selector statement looking for any paragraph element in your HTML with the myclass attribute. The HTML markup and content that the CSS would apply presentation to is as follows:

I'm a blue and bold paragraph
I'm another blue and bold paragraph
I'm just a regular paragraph

Example of CSS Selectors Being Rendered in the Kindle Fire

Using classes as your method of selecting HTML is useful, because these classes can be repeated more than once throughout multiple HTML files. Making changes to the presentation of all of the elements with a class attribute requires you to only alter the CSS in one place (i.e. the stylesheet).

In some circumstances, you may want to alter the presentation of just one element. In this case you would use a unique identifier with an id attribute. Please recall that every identifier must have a unique value within any given HTML file to avoid errors. The CSS selector syntax for unique identifiers uses a # symbol. An example of the CSS to make a unique paragraph italicized is as follows:

p.myclass
{
font-weight: bold;
color: blue;
}
p#unique
{
font-style: italic;
}

The corresponding HTML is as follows:

I'm a blue and bold paragraph
I'm another blue and bold paragraph
I'm just a regular paragraph
I'm a very special paragraph. There's only one of me.

Example of CSS Selectors Being Rendered in the Kindle Fire

Important Note: For the CSS selector syntax for classes (.) and for unique identifiers (#), make sure there are no spaces between the element selector and the name of the class or identifier.

Until now CSS selectors have only been applied to paragraph elements. However, CSS can be applied to any valid HTML markup. It is also possible to select the elements that are nested within another element. For example, you have the following HTML markup and content:

<div class="someboldstuff">
I'm a child of the "someboldstuff" div
I'm the second child, but I'm not ignored by my div parent
I'm the last and cutest child
</div>
I have no parent so to speak

There are three paragraph elements nested with the div element. The paragraph elements are known as the children and the div element is the parent. To select the paragraph elements that are children of the div element with the class attribute of someboldstuff, the CSS would be as follows:

div.someboldstuff p
{font-weight: bold;}

CSS Selecting Descendants

Important Note: Ensure there is a space between the div and p selectors to instruct the CSS that it should select the children.

CSS and HTML are useful for eBooks when you have sections that include multiple paragraphs of passages that need to be indented differently, lengthy citations from another source, and other blocks of text that need to be styled differently from the regular eBook content.

If you wanted to apply a CSS declaration to more than one selector, that is possible by using a comma (,) between two or more selectors. An example of the HTML is as follows:

<div class="someboldstuff">
I'm a child of the "someboldstuff" div
I'm the second child, but I'm not ignored by my div parent
I'm the last and cutest child
</div>
I have one bold word in my paragraph.

The CSS:

div.someboldstuff p, span.someboldstuff
{font-weight: bold;}

You need to exercise some caution when utilizing the CSS selector system. Occasionally you will run into problems when declarations are in conflict with one another for elements that are selected in multiple parts of the CSS file. As an example, say you had the following HTML:

I'm just a regular paragraph. The CSS made us bold
<div class="different">
I'm a different paragraph where the CSS made us normal.
I'm blue.
I'm a very unique case, even though a bunch of other selectors are grabbing me.
</div>

And the CSS:

p
{font-weight: bold; color: black;}
div.different p
{font-weight: normal;}
p.verydifferent
{color: blue;}
#unique
{font-weight: normal; color: red;}

CSS Specificity in Action

This is rather complex, so let's try to get our arms around it. You may think that all paragraphs should be bold because of the first line in the CSS. However, when CSS encounters declarations that are in conflict with each other, there is a specificity hierarchy whereby the CSS presentation will be applied from the selector most specific. This can be confusing, but the specificity hierarchy is basically as follows:

Selectors that select with the id attribute (most specific)
Selectors that select with the class attribute
Selectors that select by general elements (least specific)

Therefore the font-weight: normal; declaration in the id selector takes precedence over the font-weight: bold; declaration for all paragraph elements. As in all areas of eBook development, trial and error with careful attention to detail is the best method to isolate and correct any anomalies in your CSS presentation.

Next Post: Using CSS to Style Text in eBooks

March 16, 2012

Introduction to CSS for the Kindle Fire and Applying a Stylesheet

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 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>
My first paragraph that is aligned to the left. Hopefully my CSS will work.
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.
</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:

My first paragraph that is aligned to the left. Hopefully my CSS will work.
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.

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>
My first paragraph that is aligned to the left. Hopefully my CSS will work.
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.
</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

Pages