What's ePub?

The ePub format is a popular and well supported format for creating electronic publications. This is a great format to get your work on to the iPad and iPhone and most other mobile devices.

How does it work?

The system is based on XHTML and XML. Without getting into the technical details let’s just say it’s similar to creating a web page.

To create an ePub file you’ll need all of the tools you might use to create a web page, an HTML editor or plain text editor. You’ll also need something to convert your final book into a zip file.

ePub files are organized in a folder named for the book. This folder contains a few other files and folders.

A folder named META-INF, which contains files describing your book and it’s content.

A file named mimetype which defines the file type as an epub file.

The OEBPS folder, which contains all of the content of your book. This folder will contain all of the HTML pages and images that will make up the actual book. This folder also contains a CSS style sheet file to format and style your book. Two last files stored in the OEBPS folder are the content.opf and toc.ncx files. These are plain text file containing XML. The content.opf contains a list of all of the content in your book. This lists all of the HTML, CSS and image files used in the book content. For each item it lists the file path of the source file and the files type and assigns each a an id. The toc.ncx file defines a table of contents for the book. This file lists all of the content and assigns each a navPoint and playOrder. These define the order the pages are displayed in the book. Think of this as linking all of the pages together in order.

Package and compress

Once all of the HTML files and other files are completed your ePub file needs to be packages and compressed. On the Mac you can use the ePub Zip. Just drag and drop the folder containing your book on to ePub Zip.

Reading ePub books

There are several reads for ePub books. On the iPad/iPhone you can use iBooks. On your desktop you can use Adobe Editions.

Sadly the Kindle doesn’t support ePub, though there seems to be a few work a rounds that allow the Kindle read ePub.

More information

Here’s a tutorial on creating a photo book in the epub format: http://next.blurb.com/2011/02/17/how-to-make-an-ipad-photo-book/

Using the :nth-child selector

Ever want to select only the first element in a list? What about the last element? Or how about odd or even element? What about every 3rd element? Or, what about selecting the first 3 elements or the last 3 elements?

Of course you do, and if you haven’t wanted to do this in the past you will want to do in the future at some point, probably sooner than you think.

You can approach the problem with classes, by adding a special class to say the first three elements or every other element. But this becomes very tedious and lacks flexibility. A better solution would be a CSS selector. Well here it is :nth-child(). The :nth-child() selector allows you to accomplish the following.

Imagine for these examples that you have a page with 9 divs, each with the class name box. To select all of these you’d use: .box I’ll modify this selection with :nth-child() in the examples below to illustrate how it works.

  1. Pick any single element – .box:nth-child(3) /* Selects the 3rd element */
  2. Pick out only the odd elements – .box:nth-child(odd) /* Selects all odd numbered elements */
  3. Pick out only the even numbered elements – .box:nth-child(even) /* Select all even numbered elements */

These first three examples use :nth-child() in it’s most basic an obvious form. Include the integer position of the element or a key word, odd or even.

Here’s a few more examples.

  1. Pick every 3rd element for example 3, 6, 9 etc. – .box:nth-child(3n)
  2. Pick every 5th element for example 5, 10, 15 etc. – .box:nth-child(5n)

Here you can think of n as an integer 1, 2, 3 etc. multiplied by the number on the left. So 3n would be 3, 6, 9 etc. There’s more, how these examples.

  1. Pick every third element starting with the first. For example boxes 1, 4, 7, 10 etc. – .box:nth-child(3n+1)
  2. Pick every third element starting on 5, for example: 5, 8, 11, etc. – .box:nth-child(3n+5)
  3. Pick every element after the 4th: 5, 6, 7, 8 etc. – .box:nth-child(n+5)

You can think of the last example: .box:nth-child(n+5) as .box:nth-child(1n+5). Which might make more sense.

Here we’re using an+b. Where elements are selected as a*n+b. Which works out as the following for 3n+5

  • (3*1)+1 = 4
  • (3*2)+1 = 7
  • (3*3)+1 = 10
  • etc.

The last example above .box:nth-child(n+5) would select all of the elements after the first 4. To select only the first 4 elements you can use :nth-child() in this way:

  1. Pick the first 4 elements, for example: 1, 2, 3 and 4. – .box:nth-child(-n+4)

Think of this as:

  • (-1*0) + 4 = 4
  • (-1*1) + 4 = 3
  • (-1*2) + 4 = 2
  • (-1*3) + 4 = 1

An alternative to :nth-child() is :nth-last-child(). Which works in the same way, but starts counting backwards from the last element.

What could you use this for? Here are a few ideas:

  1. Selecting every other item in a list.
  2. Selecting the first item in a list.
  3. Selecting the first three items in a list.
  4. Setting the margins on the last item in every row.
  5. Selecting the first row of elements.
  6. Selecting the last row of elements.


LESS is it more?

Someone just brought LESS to my attention. LESS is a Javascript library that extends the functionality of CSS. LESS effectively adds variables and functions to your CSS. Usng LESS you can define variables and apply mathematical functions to your values in your stylesheets.

For more information read more on their web page: LESS.org

JQuery: .css()

The JQuery .css() method provides a function to set CSS properties and values for any element. The .css() method will also retrieve the value of any CSS poperty for any element.

To set a CSS property use of the of the following methods.


Using this system set the property as the first parameter and the value as the second. Both parameters should strings. Use the standard CSS property names, the same as used in your CSS style sheet. For example:

$('p').css('color', '#F00');

The line above would find all p tags on a page and set the color to red.

Sometimes you may want to set multiple properties at once. In these cases use this syntax.


In this case pass one parameter, an object containing all of the properties and values to be set. Since property names set in the object can not contain special characters you’ll need to alternate property names. For example normally you would use background-color in your CSS style sheet. When using an object property list the – (hyphen) is not allowed. Instead use: backgroundColor. Notice I removed the unacceptable character and began the next word with an uppercase letter. For example:


The example above sets the line height and letter spacing of all p elements.

Alternately, the CSS property name can be used as long as it is wrapped in quotes. For example the line above could alternatively be written as:



The value of any property may also be retrieved. For example, imagine you wanted the font-size of one element to match the font-size of another.

$('li').css('font-size', $('#headline').css('font-size') );

The line above sets the font size of all li elements to the same font-size as that of the element with the id name #headline.

CSS Position

Here are a few examples showing the use of the CSS absolute and relative position properties.

A key feature when using position:absolute is when the parent is position:relative the absolute child element can be positioned within the coordinate space of the parent. Effectively this means you can position the child by setting it’s left and top properties. The child element will position from it’s upper left corner relative to the upper left corner of the parent.

For example setting the child to left:0 and top:0 would place the child object so that it’s upper left corner was aligned with the upper corner of the parent.


Full Page Background cover

The background-size property determines how a background image fills an area. The size and method used to fill the space has several options. Here’s an example that fills the background with an image, resizing the image to fill the space.

Background-size example

It may take a moment to load the background image. After the background loads resize the browser window. Notice the image always fills the space.