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:

1. Selection of types of HTML elements
2. Selection of HTML that has been assigned a class with the class attribute
3. 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 <p class="myclass"></p> 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:

<p class="myclass">I'm a blue and bold paragraph</p>
<p class="myclass">I'm another blue and bold paragraph</p>
<p>I'm just a regular paragraph</p>

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:

<p class="myclass">I'm a blue and bold paragraph</p>

<p class="myclass">I'm another blue and bold paragraph</p>

<p>I'm just a regular paragraph</p>

<p id="unique">I'm a very special paragraph. There's only one of me.</p>

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">
<p>I'm a child of the "someboldstuff" div</p>
<p>I'm the second child, but I'm not ignored by my div parent</p>
<p>I'm the last and cutest child</p>
</div>
<p>I have no parent so to speak</p>

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

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:

<p>I'm just a regular paragraph. The CSS made us bold</p>

<div class="different">

<p>I'm a different paragraph where the CSS made us normal.</p>

<p class="verydifferent">I'm blue.</p>

<p class="verydifferent" id="unique">I'm a very unique case, even though a bunch of other selectors are grabbing me.</p>

</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:

1. Selectors that select with the id attribute (most specific)
2. Selectors that select with the class attribute
3. 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

CSS Selector Tutorial for eBooks