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:

Styles are applied to text.
Appearances are applied to styles.

The following graphic illustrates how styles-based authoring works:

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">.
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.

Other Styles Related Information

See the following Web Workmanship web pages:

CSS Primer

[ Training | Troubleshooters.Com | Email Steve Litt ]