Who, what, when, where and why

Designing books in Booktype with some CSS trickery

Since the audience reading this blog is diverse I will start at the beginning .... 

First there was nothing ... and then ...

Ok, ok... just kidding.

Let's stick with web based topics for now. Here are a few points to get us started:

1. To design web pages and in our case books you use CSS (Cascading Style Sheets) and you can read more about that on the web.

2. Fortunately, you don't need to understand much about CSS to get started.

3. I am hoping these blogposts will minimize the time spent designing your book using CSS.

First off here is an idea of what the basic syntax in CSS looks like:

part_of_book {

   command: value;

}

You should know certain commands like part_of_book and several others, but don't worry it's not that complicated.

Since we are not interested in designing a web page but rather how to format a book I will use CSS commands to refer to a printed book design.

You could say that the entire book would be called the body in CSS and if you want to apply an overall design to it you would use the command part_of_book.

I will do some tests here and play with different parts of the book. For instance, I will change the background color. The command for that is background-color.

So in CSS we would write:

body {

  background-color: red;

}

With that command we change the background color of our entire book to red.

As you can see, the line of code consists of commands on the left and values on the right. Another thing is that we always finish each line with a semicolon.

Go on test it.

You can type in your css command in the Book Formatted PDF Settings and don't forget to select Override ALL previous settings with custom CSS.

Finish the design editing with the command Publish and wait for a PDF document to be created.

If the whole book now has a red background then you have made your first book design using CSS!