By Hufsa Tahir
Please note: this article assumes prior knowledge of CSS classes.
Every chapter in an eBook file is made up of a collection of HTML tags. Divs, span tags, and paragraph tags all form the make-up of the page. Usually, the style of the content within these tags (the font style, font colour, margins, etc) is set in the CSS file and marked with its own name (i.e. its class). The specific style is then applied to the tags’ content by calling its class name in the page’s HTML.
When you generate an ePub from InDesign, InDesign automatically assigns class names to each of the various HTML tags it uses on a page. So every div will be formatted something like:
However, not everybody uses InDesign! When you create ePub files in Calibre or other programs, you can control the classes and the styling applied directly in the CSS and HTML of your eBook. While this is fantastic for customization, it also reads to situations like the following CSS appearing in your eBook:
Technically, this is not wrong. Maybe divs were only used in certain sections of your ebook, used to control the width of certain items in the chapter (like an illustration or a heading).
Practically speaking, however, div tags, and all tags should not be styled directly. This includes span, h1 and p tags. These tags should always have a class name attached. Like this:
You would then call the class in your book’s chapter like this:
When it comes to eBooks being read in devices, styling the actual tags themselves can become problematic. Unlike a webpage, eReading devices and apps are not blank slates. They may process an ePub to add specific tags in for the purpose of bookmarking, proper footnote formatting, and other tasks. So when you style an actual tag instead of styling a class, you run the risk that any tags inserted by the eReading platform may read the tag CSS in your eBook file.
Like this:
In short, it is not good practice to style an HTML tag directly. Instead, you should style classes, and then apply them to tags in your eBook chapter pages.
Incorrect:
Correct:
Trackbacks/Pingbacks