This is the fifth installment of a series of articles. To read the previous one, please click here

Now that we’ve seen some of the structural basics of HTML, it is time to examine how you can affect the actual look of these elements. The easiest, most efficient and most reliable way is through so-called style. A style sheet is nothing more than a list of definition that allows you to tell the device exactly what you want it to do with each of the available HTML tags.

A valid style definition in HTML would look something like this…

<style type=text/css>

  p
  {
    text-indent: 1.5em;
  }

</style>

We need to surround these styles with a <style> HTML tag to tell the device which part of our page is the actual style definition or it would otherwise mistake it for structural HTML tags and end up with syntax errors.

There is a remarkable wealth of things you can directly influence with these types of style settings. The most commonly used ones are things such as font face, font size, line spacing, indentations, margins and so forth, but it is also possible to actually create things such as borders, drop shadows and other exciting things with, or even include specific images for display with each one of their respective tasks.

Some of the biggest problems I have seen while I was creating HTML sources for eBooks had often to do with the fact that every eBook reader has its own default settings. Some of them are set up to include extra space at the end of a paragraph, others are set up to create a 20 pixel margin around the text, others yet will indent the first line of every paragraph by default.

For us, this kind of random behavior is oftentimes unacceptable, and fortunately there is an easy remedy for it — a so-called style reset.

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0; }

This line, which will be the very first line in our style definitions, tells the device to remove all default margins and padding by setting them to 0 for all major tags we might use. The next step for us is then to go create specific style settings for all the tags we are going to use.

Since we will be using only a very small subset of HTML tags, in practice this is very little work but instantly gives you 100% control over the look of your final eBook. No more guessing or chance formatting for you!

“Hold on,” I can already hear you say. “Not all paragraphs are equal, for example,” and you are absolutely correct. In our eBook we will have paragraphs for general text, we might have headlines, we certainly will have chapter headings, and each of these will require a different look.

Fortunately, HTML gives us an easy way to create customized tags and allows us to style each of them individually. We do this by assigning a class to a tag, thus letting the device know which style to use for it. Take a look at this line, for example.

<p class=headline>Look at me</p>

Upon encountering this paragraph tag, the device will look for the paragraph style called “headline,” and use its settings to display the paragraph. If we want to tell it to display this type of paragraph in a large bold font, we would simply create a style that could look like this.

p.headline
{
  text-size: 2em;
  text-weight: bold;
}

This is pretty easy stuff, isn’t it? But what the heck does 2em mean?

While it would be possible to define the text size in points, the way you would do in a word processor, in the publishing world it is oftentimes easier to use the alternate measurement of Em.

Since text sizes in a document are usually in a certain relationship to each other, it makes much more sense to use a relative measurement than absolute font scaling. In practice this means that if you change the base font size of the document all other sizes in the document are automatically scaled up as well to an equal degree. All measurements made with ems are derived from that one base font size definition.

Not only does this ensure that the size relationship between fonts in your document remains intact at all times, it also means that you will not have to change all your styles manually, if, after a long day’s work, you decide that all the text is actually a tad too small. By using the relative measurement of em, this won’t be problem for you, ever.

I could bore you with the history of the em and talk about the old days when typesetters like myself would work with lead characters, but to make things easy for you, simply think of one em as the space taken up by the character M. In most typefaces, this creates a space that is as wide as it is high and is therefore a recognized measure.

If we are working in a 12pt font, for example, 1 em is also 12pt. Now, let’s assume we want to create an indentation in our text that is four characters – or 48pt – wide, we would simply make the indentation 4em. The advantage, as described above, is that if we should decide to switch to a 10 font instead, the indentation of 4em will still be four characters wide — 40pt in the new font size. The visual balance of our text will remain unaffected and it will remain pleasing to the eye without us having to raise a single finger. That is the magic of using the right tools for the job…

There are many parameters that you can adjust through HTML styles — far too many to cover here. We will encounter a number of them as we go along. Since most of them are self-explanatory, I may not necessarily explain the function of each one. However, if there are certain things to look out for, or if we should encounter unusual settings, I will certainly let you know about it.

There is one HTML tag in particular that I think I should single out at this point, however. I usually stay away from using H1 tags and its brethren H2, H3, H4, H5 and H6. They are strange beasts and their behavior can be quite unpredictable, depending on the device or browser you are using. Since we can recreate the behavior of these tags easily through the use of specially styled paragraphs, I usually prefer going that route.

A replacement of the H1 tag, for example, could look like this.

<p class="h1">This is a large headline</p>

By using an appropriate style for the paragraph class we can now give it the size, font and weight we desire.

p.h1
{
  text-size: 4em;
  text-weight: bold;
}

Below you will find an example of a style description that could easily use in any eBook right out of the box and get good results, no doubt.

<style type=text/css>

  html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, tr { margin: 0; padding: 0.1em; }

  p
  {
    text-indent: 1.5em;
  }

  p.title
  {
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 5em;
  }

  p.headline
  {
    text-indent: 1.5em;
    font-weight: bold;
    margin-top: 1.5em;
  }

  p.chapter
  {
    text-indent: 1.5em;
    page-break-before: always;
    font-weight: bold;
    margin-top:5em;
    margin-bottom:2em;
  }

</style>

I will leave you with this example for this time. Feel free to explore style settings in a bit more detail in the meanwhile. In our next installment we will take a look at how to put it all together into an actual eBook source file.

Take pride in your eBook formatting
Part I • Part II • Part III • Part IV • Part V • Part VI • Part VII • Part VIII • Part IX

Need help with an eBook project? Check here for more information.