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.

Saturday, 31 May 2014

How to understand the syntax of CSS

After several posts on CSS, I thought it best to have a post which goes into the syntax of CSS in detail.

I’ve already covered this in an earlier post but, for reference, the CSS stylesheet needs to be linked to EACH chapter in your e-book by including the following line in the <head> section in the chapter:

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


Once you have linked the stylesheet in the first chapter, splitting that chapter using Sigil will copy the stylesheet link to the new chapter.

The stylesheet is just a text file, although the extension should be ‘.css’. It needs no header and should contain no html. It should just contain a single line for each style, as indicated below. First consider the style for a paragraph (enclosed in the html file by <p> and </p> tags). The syntax is just this in the CSS stylesheet:

p {style definition}

style definition will be discussed later. What this line in the CSS stylesheet achieves is to apply the style definition by default to every paragraph tag in your e-book. By way of illustration the following definition in the CSS stylesheet makes ALL paragraphs in the document indented by 1 em:



p {text-indent: 1em;}

My advice is to use paragraph tags exclusively in your e-book, with the exception of <h1> and <h2> etc. tags for chapter headings. These are necessary to allow Sigil to build your table of contents. You will also need <img> tags to hold images. You could define a style for image tags to centre all images like this in the CSS stylesheet:

img {text-align: center;}

I will cover inserting images in a separate post, as there is just a bit more to it than that.

So that covers how to apply a CSS style by default to all instances of particular tags. You can also define a CSS ‘class’ to apply specific styling ON TOP of the default style. Each class needs a name which should be a single text string with NO spaces. The syntax is like this in the CSS stylesheet:

.className {style definition}

And it is applied in your html files by adding the following to ANY tag:

< class="className"> </ >

So for example the following in the CSS stylesheet:

.unindented {text-indent: 0;}

will make all paragraphs in the chapter to which you have applied this class (like this):

<p class="unindented"> </p>

have a text-indent of zero. (The unit is not necessary in this case.) And the class overrides the default paragraph style in the example above.

An alternative way of applying a style is with an inline CSS style. In this case the style definition is included directly in the html tag in the chapter:

< style="style definition"> </ >

So the example above would look like this as an inline style applied to a paragraph tag in the chapter:

<p style="text-indent: 0;"> </p>

I do NOT recommend this, as you would need to type in the style definition in EVERY tag you want it applying to. Although this IS recommended in the Amazon Kindle Publishing Guidelines as a possible solution if a CSS class defined in the stylesheet doesn’t work for some reason. Although I have found using the classes method to work perfectly satisfactorily using the CSS properties discussed in this post, so this ought not to be necessary.

We now come to the style definition in more detail. Wherever I have used style definition in this post the syntax of the style definition is the same and is as described below.

The style is defined by a number of CSS properties, of which the ones we are using are just: text-indent, text-align, margin-left, margin-bottom, font-weight, font-style and font-size. These CSS properties can be guarranteed to work with a Kindle. I have used them all and can confirm that they work properly. Be warned, though, that margin-right and margin-top will NOT work on a Kindle. I am including the CSS property display in the table below, but if you specify a value of  none for this property  it will be ignored by a Kindle, and the text will be displayed. It does, however, work in an e-pub and is useful to hide text.

Each property is assigned a value in the style definition by following the property name with a colon and a space. (The space matters.) Then the actual value of the property follows. The value can be either a text string or a numerical value, as appropriate. Finally, each property definition should be followed by a semicolon, closed up to the value.

Properties taking a text string as a value (note the American spellings):

property  value(s) of interest supported on Kindle?
text-align:  left, right, center, justify  ✔
font-weight:  bold  ✔
font-style:  italic, normal, oblique  ✔
display:  none  ✘

A numerical value is specified by a number, followed by the unit closed up. Units can be px (pixels), pt (typographical points), % (percent) or em (recommended). If the value of the property is ‘zero’, then the unit is not necessary. An em is the width of the letter ‘m’. By using ems as your unit the proportions of your design will be maintained as the user of the e-book reader changes the point size on the display.

Properties taking a numerical value:

property supported on Kindle?
margin-bottom:  ✔
margin-top:  ✘
margin-left:  ✔
margin-right:  ✘
text-indent:  ✔
font-size:  ✔

NB to create a hanging indent, use a text-intent with a negative value, but make sure the margin-left is set far enough in to accommodate it! (I have yet to find a use for a hanging indent but that is how you would do it.)

Multiple style definitions should be separated by a semicolon and a space. The final style definition should also end with a semicolon, but NO space after. So an example of a style definition involving two properties would be defined as a class in the CSS stylesheet: like this:

.justifiedIndented {text-align: justify; text-indent: 1em;}

OR in the chapter as an inline style:

< style="text-align: justify; text-indent: 1em;"> </ >

for a paragraph tag the code for the inline style in this example would look like this in the chapter:

<p style="text-align: justify; text-indent: 1em;"> </p>

and to apply the style defined as a class to a paragraph tag the code would look like this in the chapter:

<p class="justifiedIndented"> </p>

Obviously the name of the class has to match in the sylesheet and in the chapter and BOTH are CAse SeNsITivE. You should restrict the class names to single text strings with NO spaces or else epubcheck will throw out warnings.

I have deliberately left out any discussion of embedded fonts in this post. Embedded fonts are ignored by the Kindle and so are only effective in e-pub e-books. Also the rationale for embedding fonts is questionable, as users like the ability of their e-reader to change the font. However I AM going to discuss this in a separate post, to be linked here when published.

Images are best dealt with using html, particularly as they will probably all be different sizes, although the above example of using CSS to centre all images by default is a good idea. I will post separately about inserting images and link it here when it is published.

To make your code easier to read, it is allowed to separate each part of the definition of the class by a line break:

.className
                {
                 text-indent: 0;
                 text-align: justify;
                 }

(There is then no need for the space after the semicolon.)

You can also define a CSS style in the head section of your html document like this (two different style definitions are shown in the example):

<head>
   

   <style>
   

   p {style definition 1}
   

   .className {style definition 2}
   


   </style>
   

</head>


The order in which the styling is applied is: FIRST the CSS style for the paragraph or other tag, as specified in the stylesheet THEN the style from the <head> section and THEN the class from the CSS stylesheet or inline style specified in the html tag. This hierarchy is what is meant by the term Cascading Style Sheet: the style cascades down from the stylesheet to the document, with the styling nearest to the element on the page being applied last. As you can see, having multiple CSS styles defined all over the place is getting complicated and we don’t want complicated! The more complicated your e-book the more that can go wrong with it. So my strong recommendation is to define ALL your styles IN THE STYLESHEET and to stick to CSS classes applied to the paragraph tags as far as possible.

There is more to CSS, much more, but the methods above are all you need to know about to get your e-book to format properly.

Obviously you will want to experiment with the design of your e-book so as to get it perfect. Just stick to the limited range of CSS properties I have discussed and you can be sure your e-book will display properly when you come around to converting it into a Kindle e-book. The advantage of using a CSS stylesheet is that you can change the design just as easily as editing the stylesheet.

Next Steps: When you have applied the CSS styling to your single chapter and played around with the style definitions in the CSS stylesheet to tweek your design to perfection, the next step is to split up the single chapter into the actual chapters in the e-book, create the other pages of preminary matter and end matter, make the covers, enter the metadata, build the logical and html tables of contents, and then convert the epub to Kindle format.

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

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

1 comment:

  1. This comment has been removed by a blog administrator.

    ReplyDelete

 
Twitter Bird Gadget