Since this is an introductory tutorial, we won't examine the issue of style in depth. Learn more about this element in the Using Style Sheets tutorial. The following example serves only to illustrate the basic concept.
One of the major features of HTML 4 is that it seperates structure from presentation. That is to say, you should use HTML tags to define the structure of your document, not to make it look pretty. To enhance the aesthetic qualities of your pages, use style.
By way of example, consider the following block quotation, and notice the special formatting:
I've seen the devil of violence, and the devil of greed, and the devil of hot desire; but, by all the stars! these were strong, lusty, red-eyed devils, that swayed and drove men -- men, I tell you. But as I stood on this hillside, I foresaw that in the blinding sunshine of that land I would become acquainted with a flabby, pretending, weak-eyed devil of a rapacious and pitiless folly.
The quotation should be in red text. (If it's not, you're likely using an older browser, such as Netscape 3.) Note also that the text is justified, that is, the right margin is clean and straight, not ragged like most of the paragraphs on this page.
How is it done? There are three ways to incorporate style into your document:
Our example could be constructed in any of these ways. In fact, I have used the first method, expanding the block quotation element to include a style attribute. Here's the code:
<BLOCKQUOTE STYLE="color: red; text-align: justify"> I've seen the devil of violence, and the devil of greed, and the devil of hot desire; but, by all the stars! these were strong, lusty, red-eyed devils, that swayed and drove men -- men, I tell you. But as I stood on this hillside, I foresaw that in the blinding sunshine of that land I would become acquainted with a flabby, pretending, weak-eyed devil of a rapacious and pitiless folly. </BLOCKQUOTE>
As you can see, the opening <BLOCKQUOTE> tag has been expanded to include the STYLE attribute, which has been set to the following rule: "color: red; text-align: justify".
It's pretty easy to decode this style rule. It's saying the text of the block quotation should be red and justified.
The same effect could be accomplished by using the style element. This is a two step process. First, we would add a style element to the head of the document like this:
<STYLE>
BLOCKQUOTE { color: red; text-align: justify }
</STYLE>
This would apply the style rule to all the block quotations in the document.
The third and most powerful method is to link to an external "style sheet." This is accomplished by adding a link element (not covered in this tutorial) to the head of the document like this:
<LINK REL="stylesheet" HREF="langintro.css">
This specifies an external document, a file named "langintro.css", to be used as a style sheet. The style sheet is simply a text file. You can look at it to get an idea of what it's all about. If all your pages are are linked to the same style sheet, you can make stylistic changes to your entire site by editing one file.
Hopefully this illustrates the value and importance of style sheets for Web authoring, and whets your appetite to learn more about them in the Using Style Sheets tutorial.