eBook Formatting requires the basic understanding of HTML if you want to fix errors, or apply styes to make a professional book layout.
The DIV tag defines a division or section of an HTML document and is used to apply a style to a group of elements. Similar to the <body> tag, DIV elements work behind the scenes grouping other tags together. When used in content style sheets (CSS) DIV elements help define the style and structure of your e-book.
Inline Style
Many writers formatting e-books choose to apply the style information directly in the area it is desired. Inline styles, thought effective, lose the advantage of an external or internal style sheet, so they should only be used when you need to apply the instance one time.
Example of inline style:
HTML
<div style="background: blue"> <p>This paragraph displays in a blue box.</p> </div>
<p>But this paragraph does not have a blue background as it sits outside the DIV container area.</p>
This paragraph displays in a blue box with white text.
But this paragraph does not have a blue background as it sits outside the DIV container area.
External (Internal) Style Sheet (CSS)
The most effective way to produce your e-book is to use a style sheet. The external style sheet or Content Style Sheet (CSS) is a separate document that contains all the style elements for your book. Each page of your book links to the location of the external style sheet. It is by far the best way for format your e-books as it makes book-wide changes possible from one file.
An Internal style sheet looks similar to the external style sheet with the exception it is located on every page of your e-book. This can make book-wide changes more difficult as each page would need to be corrected.
The following example shows the power of the <div> element when formatting your e-book. Let’s say you want to make a section stand out in a red box, with italic, white text. The style sheet would be written as:
CSS Style:
div.standout {
background-color:red;
font-style:italic;
color:#FFF;
}
HTML
<div class="standout">
<p>All paragraphs between the DIV tags will displays in a red box.</p>
<p>Additionally all the text will be white and italic.</p>
</div>
<p> But this box does not display in a blue box nor is it italic or white.</p>
All paragraphs between the DIV tags will displays in a red box.
Additionally all the text will be white and italic.
But this box does not display in a blue box nor is it italic or white. (Note, this displays italic on my blog layout, but for your e-book it will not be italic)
NOTE: on black and white e-readers, the box will display as grey, making the white text difficult to read. Consider using a solid black background, or use a graphic created in Photoshop.
Alignment Property
Normally, the DIV tags offer a fast and easy way to apply properties to blocks of text, such as alignment. Instead of applying the property to every paragraph the div tag allows you to easily apply the property to blocks of paragraphs.
ALIGN is one of the HTML properties that are not accepted in e-book formatting. To apply alignments, add your properties in your CSS, such as ‘text-align:center’ to the div property tag.
CSS Style:
div.center {
text-align:center;
}
Correct HTML method for digital ebooks by using class="center".
<div class="center">
<p> This is the first paragraph that is centered on the page.</p>
<p> Paragraph two is also centered. With the use of the DIV tag you can center all content between the opening and closing tags.</p>
</div>
Paragraph one of your text that is centered on the page.
Paragraph two is also centered. With the use of the DIV tag you can center all content between the opening and closing tags.
Span Element
Similar to the DIV element the SPAN element groups inline elements in your e-book document. It allows you to add a special formatting style within a paragraph.
Used as a placeholder, the <span> element indicates the beginning and end of the style within a paragraph. Though you may use inline styles, I recommend you get in the habit of using external CSS classes.
CSS Style:
span.highlight {
background-color:red;
font-style:italic;
color:#FFF;
}
HTML
<p>This paragraph displays as black text on a white page. When the span element is introduced, <span class="highlight">it takes on the styles set in the CSS — a red background, with white, italic text.</span> All text after the closing span returns to the original display of the paragraph class, or in this case, black text on white.</p>
This paragraph displays as black text on a white page. When the span element is introduced, it takes on the styles set in the CSS — a red background, with white, italic text. All text after the closing span returns to the original display of the paragraph class, or in this case, black text on white.
Hi, I have seen in your examples that you don´t use line breaks (one empty line) to separate paragraphs. In my non-fiction ebook in .pdf format I have used line breaks to make it more readable. (One thought chunk at a time). Do you suggest that I still should erase all the empty lines between paragraphs? Thanks, Demian
Demian,
For my non-fiction, I modify the CSS to add the additional spacing between paragraphs. You would add this to the CSS for paragraph (p)
=================
p {
margin-bottom:1em;
}
=================
This will add a 1 em space (about one 12pt letter height) below every paragraph.
— Suzanne
I created an ebook that works well on my Kindle. I created it on Sigil but had no Style sheet from the beginning. Is it possible to insert a style.css file AFTER the work is done? Or does the code demand that the style.css be instituted from the beginning of the process? Do I need to do it over?
You can add the style sheet at any time. Just remember if you assign classifications, such as p.red, then you will need to apply these classes to your content.