Applying Global Formatting to your EPUB Using CSS
This may be a primitive topic for those who have already dealt with HTML and CSS. But because of the increasing number of support inquiries we receive about format flexibility (and scalability), we decided to cover this topic in a blog post. CSS (Cascading Style Sheets) is basically a language to describe the formatting and presentation of your EPUB, or any HTML-based document.
Since you already have a formatting toolbar in your EPUB editor, why should you care about CSS?
- CSS will give you very fine precision over formatting that is not possible with any formatting toolbar out there.
- CSS will let you make global formatting changes across hundreds of chapters with very little amount of work.
Examples
- You want a table to have a certain design (certain margins, padding, and border styles)
- You want all secondary headings to be of a certain color
- You want to publish different versions of your book using different fonts
- You want to switch the alignment of images to be right instead of left
The downside is that you’ll be dealing with code (CSS and HTML). As things may not look very fancy in HTML view, it requires courage going into this space, but make this your stepping stone into being technical. Trust me, it will make your life easier for your future ebooks, and one day you’ll come back and thank us just like our customers did.
Understanding basic HTML
View your chapter in source mode. Every EPUB editor has its own way of enabling source mode for the chapter (some editors prevent you from look into the HTML code too). For convenience, we will be using our free Kotobee Author as an example. In Kotobee Author, this can be done by clicking on the Source Mode button at the bottom right.
You will see all your chapter content, wrapped in different HTML tags. There is always a starting and closing tag wrapping any text, such as <p></p> to represent a paragraph. Each type of HTML tag has a different meaning. For example <h1> is the primary (most important) heading. There is also <h2> all the way to <h6> to define less important headings, respectively. Images are described using an <img> tag, and tables described using a <table> tag. These are just a few examples, but you can see the entire list of tags from this HTML element reference. It’s worth mentioning also that your entire chapter content is wrapped in a single <body> tag.
Since that is explained, we can now choose to stylize a certain HTML tag using CSS.
Applying CSS to a tag
When you apply a certain format style to a tag (say the paragraph tag) it will stylize all occurrences of that tag. So all content that is wrapped by the paragraph tag will receive that style.
In Kotobee Author, click on the Global CSS button at the bottom right. This will open a blank CSS file that is accessible by every chapter in your book. The CSS structure generally looks like this:
HTML_TAG {
Style_property1: Style_value1;
Style_property2: Style_value2;
Style_property3: Style_value3;
}
So if we will apply a Calibri font and red color to all our paragraphs, this is what it will look like:
p {
font-family: Calibri;
color: red;
}
Such a tiny addition results in massive changes throughout your book. Of course you can edit those values anytime you wish. You can similarly add styles for other tags (the CSS can be as large as you want). So if we decide to additionally make our primary headings (h1) italic, this is what the new CSS will look like:
p {
font-family: Calibri;
color: red;
}
h1 {
font-style: italic;
}
To see a list of all possible styles, refer to W3School’s CSS Reference.
Being selective with CSS classes
Most times you’ll find that you don’t want a certain formatting to be applied to all instances of a tag, but just to a specific chapter or specific instances (e.g. having two style versions of a table). This is where CSS classes comes in. Instead of targeting HTML tags to apply your styles, you can be selective as to which elements to stylize.
This will require that you go back into your chapter’s source mode. Find the specific paragraph(s) that you’d like to stylize (we’re using paragraphs here just as an example). As mentioned earlier, it is wrapped in <p></p> tags. Now prepare to become a coder. You’ll replace <p> with <p class=”special_style”>. Now this HTML element has a class assigned to it. This gives you the flexibility of targeting this specific element.
You can apply this similarly to many other elements (not necessarily just the paragraph tag). You can assign the same class name to all of them. This will class them together to have the same CSS styles you apply.
In CSS, to target elements of a a class, enter a period followed by the class name. So to underline paragraphs of class “special”, here’s what we should add to the global CSS file:
.special_style{
text-decoration: underline;
}
Conclusion
CSS is extremely powerful and there is much more to it than what’s covered in this post. But this is all what you need to get the flexibility to stylize your EPUB. A great thing about CSS is that you’ll find plenty of online resources to help you. You will also find a lot of CSS templates to give you desirable ready-made effects to your elements (e.g. images). From a quick Google search, here’s one resource: 25 Beautiful CSS Image Effects You Don’t Want To Miss.
You might also enjoy:
Adding Google Fonts to your Ebook
5 Hacks for Creating a More Engaging Ebook
Alice in EPUB-Land: Understanding the EPUB format
Looking for more technical articles? Check out these in our Support Center:
Add Custom Interactivity with CSS or JS
