3. Styles and Style Sheets

One of the most integral parts of OEB is the concept of style sheets. A style sheet is a tool that helps to separate content from presentation and is used not only with OEB but with XML and (increasingly) with HTML web pages as well. You've been told that the separation of content and presentation is a "Good Thing" — after you understand style sheets, you'll begin to see why this concept is so important.

Style sheets have a few unusual properties: you could write OEB-compliant eBooks all your life and never use a stylesheet. Stranger still, someone might create a style sheet that could be used with your work long after you've written it. That's what makes stylesheets so useful: they represent the encapsulation (or bundling) of the presentation part of the publication=content+presentation equation, and therefore help keep the two completely separate. Your OEB document, with its text and tags, is the content and holds the meaning of what you're written; the style sheet(s) hold how your work is presented to the user.

How is this supposed to work? Imagine that you're writing a book to be published by the Happy Publishing Company. Happy has its own ideas about how your book should look — that is, which fonts it should have, how it should be spaced, etc. (Happy Publishing Company might have ideas about what your book should say as well, but that's another story; it should be clear to you by now that these are two separate concepts.) If you write a book and concentrate on the content, Happy Publishing Company can simply use its style sheet with your work after you're finished, and the book will look just like Happy wants it to. What happens when you change publishers? Your new publisher can simply substitute their standard style sheet and your book will suddenly take on its new look, without your having to make one single change to the actual content of the book — if you've correctly separated the content from the presentation.

That's a big "if", and one that takes a little thinking on your part, at least to begin with. Since OEB comes from a legacy of HTML which didn't stress as strongly such a separation of content and presentation, OEB in some cases makes it easier for you to put style information where it doesn't belong: mixed in with the content of your work. It is hoped that you'll be able not only to overcome these temptations, but to understand why the current emphasis of information storage and retrieval formats is going in a direction that stresses that these elements be separated.

Before going any further into the theory of style sheets, we'll examine a few examples of using styles, from the least desired to the most appropriate.

Emphasis Revisited

The previous chapter hinted that OEB has a tag named <i> which causes the specified text to be rendered (or displayed) in italics. We've told you that this is not recommended.

Being extremely smaller than other blovji his age...

What's the alternative? We've stressed that in many places, the <em> tag, specifying "emphasis", can be used in place of the <i> tag for the same effect. We've answered the question, "If they both have the same effect, what's the difference?" by saying that <em> specifies simply that a section of text should be emphasized, not how the text should be emphasized.

Being extremely smaller than other blovji his age...

The point is that, although <em> is usually rendered in italics by default, there's nothing that prevents you from changing how <em> gets displayed — nothing except a lack of knowledge, of course. We'll now address how that's done.

OEB has specified that every element has an optional style attribute. As you might guess, you can use this attribute to override the style of that element. We'll explain later the specifics of the style information, but here's a quick example of how you could guarantee that <em> is displayed in italics:

Being extremely smaller than other blovji his age...

If you wanted the emphasized text to not only be displayed in italics but also in red, you'd use the following:

Being extremely smaller than other blovji his age...

Notice that the text is still displayed in italics, because we didn't specify that the italics should be removed (there's a way to do this, which you'll see later). Instead, we specified that the color red should be added to whatever style was there already.

As you can see, we don't recommend this method, and it's not hard to figure out why. If you specify the style of the tag directly, you've gained nothing over just using the <i> tag and manually making changes. After all, this method still mixes our presentation information inside the content of our book.

Let's continue with the assumption that we'd like all emphasized text to be displayed using not only italics, but also the color red. We'll also assume you've followed the recommendations here and used the <em> tag for emphasized text. The secret to style sheets is that they use the same format you just saw used inside the style attribute, only that they've been removed from the content and placed in a separate location. This is the first way we could do it:

<?xml version='1.0'?>
<!DOCTYPE html PUBLIC "+//ISBN 0-9673008-1-9//DTD OEB 1.0.1 Document//EN" "http://openebook.org/dtds/oeb-1.0.1/oebdoc101.dtd">
<html>
<head>
<title>Karl the Creature</title>
<style>em {color: red}</style>
</head>
<body>
<p>...Being <em>extremely</em> smaller than other blovji his age...</p>
</body>
</html>
Being extremely smaller than other blovji his age...

This example correctly specifies that all occurrences of the <em> element should be displayed in red. Furthermore, the actual body of the document does not need to be changed; all text marked as emphasized will be shown with the new style.

In the previous chapter we touched on the essential components of an OEB document. In the above example you'll notice several elements we didn't discuss. OEB specifies that the <head> element is optional in a document, but if included it should contain a <title> element. The element we're interested in, <style> must be inside the <head> element. This means that whenever we include a <style> element, we'll have to include both a <head> and a <title> element as well. Both of these elements will be discussed in depth later. For now, note simply that we are specifying style information outside the actual body of the document, in a separate element named <style>.

You might wonder at this point, if we were to take our concept of separation of content and presentation to the extreme, why we place any style information at all in the same file as the document. Wouldn't it be better to store presentation information in a completely separate location? Yes, in many circumstances it would. We'll explain how a little later; for now, to make things simple, we'll keep the style information in the same file as the document.

Cascading Style Sheets (CSS)

You've seen how OEB has used XML to create a set of tags and rules to use those tags, in many instances borrowing tags from HTML. Similarly, there is a set of rules for specifying style information in an OEB document. Here, OEB borrowed the format of a specification for Cascading Style Sheets (CSS). Although there are a few differences between OEB's version of CSS and standard CSS, these differences are very minor; in most instances, OEB simply specifies which CSS constructs cannot be used. There's only one instance where OEB actually creates new identifiers. For the most part, then, if you're familiar with CSS at all you can apply your knowledge to OEB.

XML, on which OEB is based, uses a set of elements, each of which have a beginning and ending tag. CSS, on the other hand, uses different constructs. In general, CSS styles consist of selectors and declarations, the latter of which contains one or more sets of a property and a value. Although this sounds complicated, it's quite simple in practice; once you understand these basic parts, there isn't much more to learn for most things you'll want to do.

The particular style we specified for <em> looks like this:

em {color: red}

This style represents how most styles you specify will appear. Each will have the same parts introduced earlier:

There are, of course, a few more intricacies which we'll go into later, especially concerning the selector part of the equation. There are probably a couple of questions about exactly what's happening here that should probably be cleared up first.

Why does my emphasized text show up both in red and italics, even though I specified just the color red? If you specify no styles at all, there is a default style which will be applied to text between OEB tags. In OEB, the <em> tag is usually rendered in italics by default. In fact, the effect is exactly as if you had specified the following style in your document:

em {font-style: italic}

In other words, there's effectively a default style sheet used which specifies the standard style of OEB elements. In our example, specifying that the color red should be used did not state that the default style of italics should not be used. The color red was therefore added to the existing default style of italics, giving all text between <em> tags both the italic style and the color red.

If styles can be specified in multiple places, such as on the actual tag and elsewhere in the document, what happens when I declare the same style in multiple places? This question relates to the previous one. If you specify in the document's <style> tag, for example, the style em {color: red}, then every occurrence of the <em> tag will be rendered in red. If you specify, using the style attribute, that a particular <em> tag should have be underlined using <em style="text-decoration: underline">, then that particular portion of text will be underlined. But it will also be shown in red, because you've already specified that all occurrences of the <em> tag should be in red.

Each particular instance of the <em> tag, therefore, inherits the properties already defined for it. Since you specified a property for all <em> tags, this property cascades down to each of the individual <em> tags similar to the way water from a waterfall cascades down to each level of rocks before it reaches the pool below. In fact, that's why CSS uses the name "Cascading Style Sheets."

What happens if the properties I specify in several places conflict with each other? As a rule of thumb, the most specific declaration is used. If you've specified, for example, that all <em> elements should be red, but then in a particular instance specified that a particular <em> element should instead be blue, the blue wins.

CSS Selectors

A selector determines (or selects) the element(s) to which a particular style declaration applies. In our example above, em {color: red}, the selector is simple: this style will be applied to every <em> element. There are several other additions to the selector syntax that make it easy to select exactly which element(s) you prefer.

Select Multiple Elements: You could always duplicate a style declaration for several elements with different names, but CSS has an easier way to select several elements for the same style. Just place several element names in a row, separated by commas (,). For example, em, dfn {color: red} would make all emphasized text (<em>) and all defined words (<dfn>) appear in red.

Select Elements Only in Certain Contexts: So far, we've only seen the <em> element appear inside a paragraph (<p>). As we'll see later, emphasized text could appear in several places, such as inside a list or a heading. To specify that only emphasized text inside a paragraph should be red, you would list the nested elements in the correct order, separated by whitespace.: p em {color: red}. This would mean that emphasized text inside a paragraph (e.g. <p><em></em></p>) would appear in red, but not emphasized text inside a list (e.g. <li><em></em></li>). Again, we'll discuss lists later; for now, simply realize that an element can appear in different contexts, and CSS provides a way to specify these situations.

Select Elements by Class CSS allows a style to be created and given a name, and then later used with any element you decide. After specifying a name (or class) for a style, you can use the style with a particular element simply by specifying the style name in the class attribute of an element. The class attribute, like the style attribute, is an optional attribute that can be used with many elements.

For example, instead of explicitly specifying that every <em> element should appear in red, we could create a class that would allow you to specify to which <em> element the style applied. A style class is always preceded by a period or full stop character (.), like this: em.colorful {color: red}. We could then specify that a particular emphasized portion of text would use this style:"this is <em class="colorful">emphasized</em> text".

A style class can be made even more generic by omitting an element designation altogether. A modification of the previous example yields .colorful {color: red} (don't forget the '.' character), a style class which can apply to any element. This change still allows the <em> tag be made colorful as in the previous example: <em class="colorful">emphasized</em>. Furthermore, the class can be applied to other elements, such as the <p> tag: <p class="colorful">emphasized</em> would assure that all the text in the specified paragraph appeared in the color red. Note, however, that the text would not appear in italics, since the <p> tag does not have an italic style by default, as does the <em> tag.

Linking to Style Sheets

As we've seen, there are several places where we can store style information, from the most specific to the most general:

  1. By putting style information in an element's style attribute.
  2. By specifying a style class in an element's class attribute.
  3. By defining styles in a <style> element inside the document <head>.
  4. By defining styles in separate style sheet file linked to the document.

The last method, linking to an external style sheet, has only been touched upon briefly. Using this method is straightforward: simply take the style information from inside the <style> element and place it inside a separate file (preferably with a ".css" extension). The entire <style> element can then be removed, and the document can simply specify that it uses the external stylesheet.

By placing style information in a separate file, we've arrived at our ultimate goal of separating content from presentation. If there are multiple documents in a given book, the style information does not have be be duplicated inside each document; each document can rather link to one style sheet, which contains all relevant presentation information. Furthermore, a book's style can be changed simply by making the document link to another style sheet. To carry on the example at the beginning of this chapter, if Happy Publishing Company decides it wants to redesign the appearance of its entire selection of books, none of the books' contents need to be changed. Instead, Happy can simply supply an updated style sheet.

Linking Style Sheets with the <link> Element

There are several ways to actually link a style sheet to a document, reflecting the evolution of HTML and markup languages in general. When HTML first allowed style sheets, it specified a <link> element that appears inside the <head> element in place of <style>. After moving our style information out of our sample document, our style link information might look like this:

<link href="karl.css" type="text/x-oeb1-css">

As before, the href attribute specifies the style sheet to which the document is linking. The type attribute specifies the type of the style sheet. Although normal CSS style sheets have the type text/css, OEB requires that your standard style sheet have the type text/x-oeb1-css to indicate it meets the modified requirements of OEB style information.

Using <link> will make your document compatible with HTML and allow your style information to show up in a typical HTML browser. The <link> tag is not, however, a standard way of linking XML documents in general, which is why OEB allows (and the authors of this work recommend) another linking mechanism which is standardized for XML.

Linking Style Sheets with XML

XML now defines a standard method of linking style sheets to any XML document, which includes OEB documents. This method was still being standardized while the OEB Publication Structure specification was first being written, and that's why OEBPS 1.0 does not give examples of XML style linking. However, on 29 June 1999, version 1.0 of "Associating Style Sheets with XML documents" became an official W3C recommendation, and can be found at http://www.w3.org/TR/xml-stylesheet/. This new development was unfortunately missed as OEB was released, so the OEB specification still states that the final form of XML style association has yet to be finalized.

With the final recommendation of XML style association by the W3C, we can recommend that all OEB books use this method for linking to style sheets. Doing so will ensure that OEB works are standard XML documents that can endure as older versions of HTML fade. Using the XML style association mechanism is very similar to the HTML method:

<?xml-stylesheet href="karl.css" type="text/x-oeb1-css"?>

The attributes here are identical to those in the <link> element, and have the same usage. The location in the document, however, is different: the <?xml-stylesheet> instruction appears before the <html> element.

Review

Summary

CSS Properties

Completed Example OEB Document with Styles (karl.html)

<?xml version='1.0'?>
<!DOCTYPE html PUBLIC "+//ISBN 0-9673008-1-9//DTD OEB 1.0.1 Document//EN" "http://openebook.org/dtds/oeb-1.0.1/oebdoc101.dtd">
<?xml-stylesheet href="karl.css" type="text/x-oeb1-css">
<html>
<body>
<p>Years ago, when strange creatures ruled the earth, the seas were beginning to form, and humans had yet to appear, there lived a young blovjus named Karl. Karl had three siblings: Kris, Krista, and Karla. Being <em>extremely</em> smaller than other blovji his age, Karl constantly ran into trouble at the dinner table.</p>
</body>
</html>

Completed Example Style Sheet (karl.css)

em {color: red}