Can Everton Jones find out how his father stole Emperor Bokassa’s diamonds and, more importantly, where he hid them; before the world and his brother get there first?
Click on the picture link in the sidebar to read an extract of my first novel, which was published by Paradise Press in August 2012.

Wednesday, 7 May 2014

How to create and link a CSS stylesheet in an e-book using Sigil

Once your book text is imported into an epub file, you will need to style it using CSS. To do this you could use ‘inline’ styles, but that is inefficient and difficult to update. The most elegant, and efficient, way to apply CSS styles is using a CSS stylesheet. This post covers how to create and then link a CSS stylesheet in your e-book. Subsequent posts will cover how to define the CSS styles and more importantly which CSS styles will work with Kindle and which will not.

To create a new stylesheet in your e-book using Sigil, first right-click on the ‘Styles’ folder in the book browser. Then select ‘Add Blank Stylesheet’ from the pop-up menu:


Sigil creates a blank stylesheet called by default: ‘Style0001.css’ for you. You will probably want to rename it, so right-click on the filename in the book browser and select ‘Rename…’ from the pop-up menu:



The filename opens for editing with the name selected:


Just type the name you want. DO NOT change the extension ‘.css’:


Click anywhere to finish. The stylesheet will be open in a tab in the main window:


Obviously, as this is a new, blank, stylesheet, there is nothing in it yet! It can be closed by clicking on the red ‘☒’ to the right of the filename in the tab at the top of the window. Re-open the tab by double-clicking the filename in the book browser.

The stylesheet does not need any sort of header, and should NOT contain ANY html.

I’ll define a CSS style to use as the default style for paragraphs by entering the following in the first line:

p {text-align: justify; text-indent: 1em; margin: 0;}


This style will be automatically applied to every paragraph in the ebook. Make sure the style is reproduced exactly as shown. The capitalisation is important, as are the spaces and semicolons and all other characters. A SINGLE typing error will cause the style to be ignored. In this case the style causes the paragraphs to be fully justified and to be indented by 1 em. An em is the width of the letter ‘m’ in the chosen font. The margins have been set to zero. Note that the unit must be typed closed-up to the number, without a space.

The syntax for CSS, which styles work with Kindle and how to replace the markup you entered in your MS Word file with CSS are all covered in future posts. The example above is just to show how easy it is to write a CSS style.

Now you need to link the stylesheet to your chapters. Best to do this when you create the new, blank e-book file. In the book browser, double-click on the filename (Section0001.xhtml) of the blank chapter created by Sigil to open it in a tab in the main Sigil window:


Switch to code view by clicking on the ‘<>’ button in the toolbar:


To link the stylesheet, type the following in the <head> section of the chapter:

<link href="../Styles/MyStylesheet.css" rel="stylesheet" type="text/css" />


Note that ‘../Styles/’ is the path to the stylesheet. The chapter is in the ‘Text’ folder and the stylesheet is in the ‘Styles’ folder. BOTH are in the ‘OEBPS’ folder. The two dots tell the ebook reader to look in the enclosing (OEBPS) folder to find the stylesheet in the Styles folder. The filename of the stylesheet in the link must of course exactly match that of the actual file.

The stylesheet needs to be linked in EVERY chapter, although Sigil will automatically create the stylesheet link when you split a chapter, saving you a lot of work.

And that’s it, you’re ready to begin defining styles in your stylesheet to format your ebook.

Next Steps: You will need to enter styles in the CSS stylesheet to match each of the markup codes you entered earlier and then apply those styles using find and replace. Only certain CSS properties are supported in the Kindle and the next post in the series lists CSS properties which work with Kindle and gives examples of CSS styles which use these properties and match the markup codes I use. You can find a primer on how to get started using Sigil here. Another post covers the syntax of CSS.

Index to ‘how to …’ posts:

How to ‘unpack’ an epub file to edit the contents and see what’s inside.
How to understand what is inside an epub
How to link the html table of Contents in a Kindle e-book
How to restructure the html table of contents for a Kindle
How to delete the html cover for a Kindle ebook
How to link the cover IMAGE in a Kindle e-book
How to clean up your MS Word file before your get started
How to markup an MS Word file to identify the formats before importing it into an epub
How to create a new blank e-pub using Sigil
How to import your marked-up MS Word file into your ebook using Sigil
How to create and link a CSS stylesheet in an e-book using Sigil
How to replace the markup with CSS styles in your ebook using Sigil
How to style an e-book so it works with the limited CSS styling available to Kindle e-readers
How to understand the syntax of CSS
How to style Small Caps in an e-book
How to split your ebook up into chapters using Sigil
How to sequence your e-book
How to phrase the copyright declarations etc. in an e-book
How to generate the logical table of contents using Sigil
How to understand toc.ncx in an e-book
How to generate the html table of contents in an e-pub
How to style the html table of contents using CSS
How to create an html cover for your epub using Sigil
How to present references and notes in a book
How to use Mark Up to link notes in your e-book
How to present a bibliography in a book
How to use markup to link entries in a bibliography with the notes section
How to index an e-book
How to use the tools in MS Word to create an index
How to alphabetise an index or bibliography
How to adapt the print index in your MS Word file for an e-book using markup
How to adapt cross-references in your print index for e-book and how to use markup to make the links
How to understand content.opf
How to understand and edit the Metadata of an ebook using Sigil
How to understand the manifest in content.opf
How to understand the spine and guide in content.opf
How to test your e-pub using flightCrew in Sigil
How to test your e-pub using epubcheck
How to convert an e-pub to Kindle using kindlegen

tinyURL for this post: http://tinyurl.com/ka2ou84

No comments:

Post a Comment

 
Twitter Bird Gadget