Introduction
Take it from me: Things go very wrong for those who willy-nilly apply appearances to text in their web pages. The willy-nilly appearance approach almost always leads to documents with inconsistent appearances; e.g. book titles that are italic some places, bold other places, and dark green still other places. Such inconsistency confuses readers.
Another problem that crops up with the willy-nilly approach occurs when you decide to change the appearance of a certain type of text. For instance, if all your book titles are italic, but now you want to make them dark green instead, you need to find every instance of italic text, decide whether it's describes a book cover, and if so, change it to dark green. And if tomorrow you decide to change your book titles to bold instead of dark green, you have to go through all of this again. There's got to be a better way.
And there is. It's called styles-based authoring. Instead of willy-nilly applying appearances to text, the styles-based author puts the text one place, the appearances another place, and uses styles to interface between the text and appearances:
- Appearances are applied to styles.
- Styles are applied to text.
The following graphic illustrates how styles-based authoring works:
A final benefit of Styles Based Authoring is that your stylesheet can apply to several documents, so in the case of HTML all the web pages on your website can have the same look and feel. If one of the pages needs a style to be different than the others, that's no problem, you can just redefine some or all of that style on the single page.
For HTML documents, styles are created in CSS. See the following section of this document...
Styles In CSS
Observe the following partial HTML file with CSS:
<html>
<head>
<style>
span.booktitle{color: DarkGreen;}
</style>
</head>
<body>
<p>Last year I read
<span class="booktitle">Gone With The Wind</span>.
The year before I read
<span class="booktitle">Dracula</span>.
The year before that I read
<span class="booktitle">Moby-Dick</span>.</p>.
</body>
</html>
In the preceding partial web page, all three book titles were assigned a style called <span class="booktitle"></span>. Meanwhile, that style is defined, in the CSS, as being dark green. So all the book titles are dark green, and tomorrow if you want to change them to bold instead, you simply change the line of CSS defining this style. Note the following:
- In the body, styles are applied to text using the construct<span class="booktitle">.
- In the <style></style> element in the head, the style's appearance is defined using the constructspan.bookcover{color: Darkgreen;}.
- The appearances of the style must appear in the CSS inside a style inside the head section.
Where to Go From Here
Now that you understand the hows and whys of applying appearances to styles, and you know styles are defined and applied via CSS, it's time to read the CSS Primer.