How to make an ebook – shortcut codes

Hello and I do hope you have enjoyed the 5 part series How to make an ebook. I certainly have enjoyed making it.

In part 5, I promised some short cuts in the CSS code. I’m going to show you one short. (Just one!) This short cut will prove invaluable as it will save you a lot of time and effort when adding your code. I don’t want to bog you down with too much code, as this is probably the first time you have really used code on anything computer related.

With this short cut save you time and effort, but also will add less code to your manuscript. In the end, you will have a much cleaner code based manuscript.

Why am I giving you the short cut now? I believe that to fully appreciate and understand how the short cut works, you first needed to know the long drawn out way of coding. Line by line. In essence, a proven way that worked.

Now you will have a new way that is just as good and easy, and importantly, works!

Let’s get coding.

I am presuming now that you have example-code-v5.html and it’s open in your HTML editor of choice. If you want, you can download example-code-v6.html It has the new code added.

For this short cut example, I am going to use Coffeecup. Why? Because you should be competent enough to use any light weight HTML editor that you open, recognise the CSS code that’s been added to your manuscript and be able to add this short cut to it. Also, as I show this on the video, Coffeecup has the live preview, so what changes I make on the code, you will see on the preview window at the same time.

If you want me to show you using KompoZer, then I’ll be happy to, but for now, I will use Coffeecup.

Look at the code below – Remember it?

p.indent
{
text-indent: 1.25em;
line-height:130%;
margin-bottom: 0.2em;
}

This is part of the list of CSS p.classes you created. We are going to change the p.indent class. I want you to delete p and replace with div (Div again?)

Is should look like this:

div.indent
{
text-indent: 1.25em;
line-height:130%;
margin-bottom: 0.2em;
}

Nothing else, just that.

When you do that all your indents will disappear. (Are you MAD!) I hear you say. All that coding screwed up! That’s why you have only done five short chapters.

Then, everywhere you have placed <p class=”indent”> Delete it and only keep <p></p>.  Nothing else. At the moment you will have no indents.

This short code change is pretty powerful when used on a large scale project. Let me explain what we are doing.

By using another <div> tag, it allows us to encompass a whole section of text until we close it with </div>. Can you see what it will do. By enclosing everything with one line of code, all new lines are then indented. ( Hang on, where do we put the code? ) Excellent question!

We put <div.indent> at the beginning of the chapter section.

Example:

<!– CH 2 SIGHTINGS –> – ( Chapter Section )
<div class=”indent”> - ( New Div Class )
<p>The age of magic and mysticism was believable at one time. Humans and Faeries were friends, and England was in a time when folklore, myths and legends were born from great acts of chivalry. Knights were abundant and the King was respected by both his subordinates and the animals of the land.</p>

<p>At that time, certain myths were true such as faeries, and they had been around longer than anyone could remember. Humans and myths lived together side by side in harmony. As both groups lived off the land, both helped each other.</p>

<p>The faeries protected the domestic animals and the harvest, and humans were very careful as to what was cut down from the woodlands. For England, it was a very prosperous period in time, until something started to stir.</p>

</div> – ( End with Closed Div Tag )

<p class=”pagebreak”> – ( Page Break )

<!– END 0F CH 2 SIGHTINGS –> - ( End of Section )

We have deleted all <p class=”indent”> and just kept <p>.

Again, by opening with <div> anything before </div> is acted upon. It gives any enclosed text a style that you want, in this case, an indent on every paragraph.

We used this same principle when we changed the poem text to italics.  <div style=”font-style: italic;”>

That’s it.

You will see a difference in how much less code you will need and how much cleaner it looks.

This has been a very short tutorial. I wish you all the best.

Enjoy.

 Download HD version of the video ( right click, save as… )

Return from Ebook CSS short cut to Let’s Get E-published Home Page

Article by Ian S. Rutter

Ian S. Rutter is an indie publisher of a children’s book called ‘The Faeries of Birchover Wood’ He is writing the sequel, a short story and a horror novel. For fun he spends time with his three children and his wife. He loves reading, drawing, walking and daydreaming.

Connect with me on Google+

Digg button brought to you by diggZ-Et (WordPress Plugin)

Be Sociable, Share!

•