Sigil User Guide

0.7.2

Use Stylesheets

— Formatting with Style —

This tutorial describes stylesheets and how to use them in your EPUB.

A stylesheet (or CSS – Cascading Style Sheet) is a list of instructions that tells ereaders how to display the text in your book. More specifically it tells the ereader how to style text using HTML tags used in your book. For example, this is a style for a paragraph of type (or class) "author":

tutorial-styles-example1

Understanding and using CSS is the best and most flexible way to layout your book exactly as you want.

You can find other introductions to CSS online, including:

Using CSS can get quite involved, but if you become familiar with the basics it will make it much easier to understand why your book looks the way it does and how to modify its layout.

This chapter assumes you are familiar with Code View since you need to use Code View to see the details of styles.

What is a Style?

Styles are used in a book to do things like “make this text blue”, or “make that text centered”, or "leave a little more space above this text". A style definition is just text that looks like:

color: blue;

which says make the color of the text blue.

But styles aren’t very useful unless they are applied to something. In the case of an EPUB styles are applied to the HTML elements in your document, tags like p (paragraphs), h1 (level 1 headings), div (divisions), span (spans), etc.

There are 3 ways styles can be used in an EPUB:

A separate file is the recommended way to use styles. The descriptions below of each approach will help you understand why.

Style Attributes

To apply a style directly to an HTML tag, you can use the style attribute in the tag. For example, to apply the style color: blue to a paragraph you would change

<p>Hello</p>

to:

<p style="color: blue">Hello</p>

This works perfectly well if you just want to change a few things and rarely update the formatting. But if you later want to change from using bold to italic for certain words then you will have to edit every place in the book that set the specific style.

Styles attributes are rarely used unless they were created by WYSIWYG software or from an automatic conversion and should be avoided.

There is a much better way to manage styles: using style selectors.

Style Selectors

A style selector is a way to give a particular style a name, and then use the style in the document just by referring to its name. More specifically the style selector is used to select which elements in your document should use the style you define.

For example, if you wanted to style all paragraphs in your EPUB to be centered, you could define a rule for a style selector as follows:

p {
    text-align: center;
}

This defines a style selector p that will match (or select) all paragraph elements p.

Just using the tag name as a selector is useful for changing every tag, but you can also select specific tags.

One of the most common ways to select specific tags is by using a class name in the tag and the selector. A class is just a name that you choose (like "firstparagraph" or "example").

For example if you wanted to style the first paragraph in a chapter slightly differently than other paragraphs, you could define a style selector as follows (an "em" is one character width):

p.first {
    text-indent: 0em;
}

This defines a style selector that will match (or select) paragraph tags that use the class name first. You could then use that style in your document for a paragraph by assigning the class name first to the paragraph as follows:

<p class="first">First paragraph in a chapter</p>

The great advantage of this abstraction is that you can now update the values of the style (to change the indentation or other settings) without having to update your text.

It is common practice to use class names that refer to the purpose of the style and not what the style does in case you change the styling later. For instance, use span.placename instead of span.bold in case you want to change your place names to italic later.

Now that you know what a style selector is and how to use them in your text, you need to actually put your style selectors somewhere in order to allow them to work.

In an EPUB you can store your stylesheet in the same file as your text (using the style element), or in separate files (external stylesheets or CSS files). You should avoid storing the styles in the HTML files, but it’s explained here in case you see it in your files.

Style Elements

If you store style selectors and rules in the same file as your text they can only be applied to the HTML file they are in and cannot be shared by other HTML files.

When using these internal styles, the style definitions are stored inside a style tag at the top of your HTML files. If you open a file in your book and switch to Code View, you will see that the top of the file contains text between two head tags. This section of your document contains information about the file, and one of the things you can put here is the style tag that defines your internal style rules.

Here is a typical use of internal styles (they are surround by the style tag):

<?xml version="1.0" encoding="utf-8" standalone="no"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html > 
<head> 
<title></title> 

<style>
        h1 { text-align: center; }
        p.boldtext { font-weight: bold; }
</style> 

</head>

Internal styles are a way of grouping styles together and using style selectors, but when you have many files in an EPUB it becomes a bit confusing as you have to have separate style rules in each file.

The best way to manage styles is to use a separate stylesheet file to hold your style rules.

You can convert or copy your inline styles and your style elements into a separate CSS file. Just remember to link your stylesheet to your HTML file and to delete the old style attributes and elements.

External Stylesheets – CSS Files

If you create a separate file to hold all your style rules, they can apply to the entire book. They are also much easier to find and edit, and updates are much easier to manage as you add and remove files. It also helps to ensure your book is formatted consistently as you can see all your styles in one place.

In Sigil, external stylesheets are stored in the Book Browser in the Styles folder.

To add a new blank stylesheet to your EPUB, use the menu item File→Add→Blank Stylesheet:

tutorial-style-blank

As you can see the stylesheet is empty.

You can copy or type the styles that you want into the file, and edit it at any time. For example, if you open the styles.css file in an EPUB you might see something like this:

Even though you have created the external stylesheet, it’s not actually used by anything yet.

To use it, you need to tell your HTML files to use the stylesheet – by linking to them as described below.

Link your HTML files to a Stylesheet File

To tell your HTML files which CSS file to use you need to link the stylesheet to your HTML file:

tutorial-style-link

If you link multiple stylesheets they will be applied in order, so the styles in the last stylesheet will override the styles in the preceding stylesheets.

What Styles Should Be Used?

The styles you use for your text are entirely up to you.

The best way to learn how to use styles is to find an EPUB that contains formatting you like and look at what its CSS files contain and how it uses those styles in the book.

If you have any errors in your style definitions they will silently be ignored. You can use the menu item Tools→Validate Stylesheets With W3C to check for errors.

Table of contents

previous page start next page