CSS, or Cascaded Style Sheets, is the markup language used to style eBooks if you want custom fonts or other important styles.

This tutorial will cover basics on CSS including using tags, elements, and custom fonts. At the end of the tutorial, you will understand basics of styling eBooks for distribution on your website or through various sales platforms.

The Basics

You can learn a lot about CSS by visiting the w3schools CSS section. In short, CSS styles the HTML tags that are embedded in XHTML (the underlying code used to write eBooks). The breakdown is as such:

Selectors are what you target with CSS Properties.

Selectors include:

Elements:

p, div, blockquote, strong, i, a (these are all basic html tags).

A Class is a Selector that is modified with a class="attribute", which is any variable you create for targeting your Selector:

<p class="special"><div class="copyright"><a class="special-link">

There are many other targets for CSS, but these two are the most frequently used for writing books.

Using Properties

CSS Properties are the various properties that can be manipulated by CSS. The most common for books will be:

font-size: the size of the font
font-family: Defining the font used
padding: how much space around the element
font-style: sets normal, italic, or oblique fonts
font-weight: sets boldness of the font
list-style-type: sets the type of marker used for a list item
text-align: sets the alignment of the text (left, right, center)

Again, there are many thousands of selectors, these are just the most commonly used in eBook design.

Examples

Here are some examples:

To use a custom font, first define the font by referencing the filename, then name the font. To use a custom font for a special h1 tag, use the following:

//define the font
@font-face {
src: url(../Fonts/fontname.ttf);
font-family: "FontName";
}

//set a class for the special h1
h1.special {
font-family: "FontName";
}

The HTML file will contain this code:

<h1 class="special">Special Header</h1>

To have a common title or phrase be slanted in the book:

//Define a span with oblique text
span.sl{
font-style: oblique;
}

The HTML will look like this:

<p>This paragraph has a <span class="sl">special code</span> that causes some text to be slanted.</p>

In this case, 'special code' will be slanted, but the rest of the text will be normal.