Two lessons ago, we looked at applying styles to paragraphs, this lesson we will look at changing how these styles appear when we export our books. And of course we will be using CSS to do it all.
To keep things simple, we will focus on the Normal <p> element and the heading <h1> to <h6> elements. Each of these elements associated with our paragraph styles has the same properties that can be adjusted using CSS. There are a lot of properties an element can have, but in this tutorial we will look at two text properties, text-align and color.
CSS Recap
First a recap – a CSS declaration starts with a selector (this is the element whose properties we want to adjust), and is followed by a declaration (a list of one more properties followed by a value that we want to set the property to). To make changes to the CSS of a book, go to the book’s Export tab, click on Show advanced options and then set CSS mode to Custom. Changes are made in the Custom CSS text panel.
To set the text-align property for an element use the following notation:
h1 { text-align:center; }
As you can see at the beginning of the rule we set the element we want to adjust (h1). The declaration used to adjust the style of our element is enclosed in braces ( { } ). The property we want to change, text-align is separated from the value we want to change it to, center by a colon (:). Finally the declaration finished with a semi-colon (;).
Every declaration ends in a semi-colon and all declarations are enclosed between the two braces. In the above example the entire rule is placed on one line, to aid human readibilit of CSS sheets, especially when there is more than one declaration, a rule is often split over several lines as follows:
p {
text-align:center;
color:red;
}
Basic Text Properties
text-align
As it’s name implies, text-align adjusts the alignment of the element. There are 4 basic values for this property: left, center, right, justify. these all apply the same settings as we covered in Tutorial #15: Paragraph Formatting.
color
This property sets the colour of the text for an element, the values used can take many forms: For common colours you can use their names, e.g. blue, red, green, black. For a complete list of predefined colour names visit http://www.w3schools.com/css/css_colornames.asp; For more comeplex colours you can use Hexidecimal, RGB or HSL colour notations. Hexadecimal defines a colour value using: #RRGGBB, where RR, GG, BB are values between 00 and FF representing levels of the three primary colours. RGB defines a colour using: rgb(red, green, blue), the parameters red, green, blue are specified by a number from 0 – 255 or a percentage from 0% – 100% and represent levels of the three primary colours present in the text colour. HSL defines a colour using: hsl(hue, saturation, lightness), hue is a value between 0 and 360 (o or 360 give red, 120 gives green and 240 is blue); saturation is a value from 0% – 100% and represents the level of the colour defined with hue (0% gives grey while 100% gives the colour’s full intensity); lightness is also a percentage from 0% – 100% and defines the amount of light in the colour (0% gives black, 100% gives white and 50% gives the full colour defined with hue and saturation).
The following rules all give the same colour to h1:
h1{color:green;}
h1{color:#00FF00;}
h1{color:rgb(0,255,0;}
h1{color:rgb(0%,100%,0%;}
h1{color:hsl(120,100%,50%;}
Have a Go!
Right, the first thing is to have the chapters in your test/play book contain a chapter heading (heading 1), some headings formatted to heading 2 and some headings formatted to heading 3. You will also want to have some paragraph text formatted to Normal (See Tutorial #15 to adjust paragraph styles).
Once that is ready click on the Export tab, show the advanced options and set the CSS mode to Custom. Under Custom CSS, scroll down to the bottom, create a new row and enter declarations for h1, h2, h3 and p using the layout shown at the top of the tutorial. Set values for the text-align and color properties for each element. With the color properties try using a different declaration method for each element as I have done in the following:
h1 {
text-align:right;
color:blue;
}
h2 {
text-align:center;
color:#FF00F0
}
h3 {
text-align:left;
color:rgb(255,50,0);
}
p {
text-align:justify;
color:hsl(180,100%,30%);
}
When you’ve finished, click Publish, Objavi will generate the pdf of your book. Once it has finished, click the download link at the bottom of the page, and open the pdf.
Browse through the document, and notice the new changes, also notice what hasn’t been changed. For instance, the Table of Contents text and Section headings all remain black, with their original alignment. If you have a large well filled out testing book, you will also notice that numbered and bulleted lists are still black. The two lists belong to the ol (ordered list – or numbered) and ul (un-ordered list – or bulleted) elements, which need their own set of declarations, to change the color property.
If you want all text in your book to be a certain color, you don’t have to go through, listing each element and declaring the color property, CSS has provided the body element, which for Booki, means everything in the chapter, use the body element to make global changes to your book design. If you want all text in your chapters to be blue, except for the h1 headings which will be green, you can set everything to blue using the body element, then set the h1 color to green. The h1 declaration will override the body declaration, setting the h1 text to green and all other text to blue.
If you have any questions or need any help using Booki go to http://support.booki.cc and post your question to our Q&A forum.
You can also join the Booki discussion by signing up at http://lists.booki.cc/listinfo.cgi/booki-booki.cc
Have fun and happy writing.
John Curwood
Booki User Guide maintainer.
