The Style Attribute and CSS Declarations (cont.) - The Human Factor

The example above is relatively harmless. If you're using a browser that supports CSS, chances are it will support the properties we used there. But what if your browser doesn't support CSS? That's the interesting bit.

One of the powerful advantages of CSS is that it doesn't alter the structure of your document. A browser that doesn't understand CSS will still recognize the H1 element as a first-level heading and display it in a way that makes sense and identifies it as such. It might not be just the way you wanted it to be, but it will be legible and accessible. With CSS, the structure of a document and the presentation of the document are separated. So even if the document is examined in a context where its presentation is irrelevant, the presentational hints will not make a difference.

Let's backtrack a bit: What if we had used the other stuff, for instance what if we had inserted an EM element around the text to make the heading italic instead of using CSS? This is what it would look like:

<H1><EM>Acme Computer Corp.</EM></H1>

Now what if a browser looks at EM elements and likes to render them as bolder, green text? Then we would get an even bolder heading in green. This would not satisfy our needs for controlling presentation - indeed, the presentation we tried to achieve did not come through. It would also ruin the structure of the document, since the heading is emphasized for no particular reason, making computers processing the document frown and shake their metaphorical heads in confusion. Finally, and most importantly, it would mystify users who would expect a neat, black heading but instead get a green, extra-bold blob.

So, as you see, it is important not to rely on the default presentation of elements. This changes from browser to browser, from browser version to browser version, and even from user to user, since all browsers I know of allow you to change fonts, font sizes, screen size, color depth and other little nuances. As I have said before, you cannot be sure that your document will appear in a certain way to everyone. So it is more important to make your document meaningful to everyone. After you're sure of that, you can then start giving hints as to how your document should look.

Closing that forgotten bracket a few paragraphs above, you can now look at the document (I hope nobody was peeking).

What do you see? More importantly, can you figure out why you see what you see? Is the heading centered, in red and in a bold italic sans-serif font? If not, why not? Is it still recognizable as a heading?

From now on in this tutorial it would help if you had a browser that supported CSS in order to see the examples in action. I would recommend Microsoft Internet Explorer 4.0 or Netscape Navigator 4.0 or a newer version of either browser. Although hardly faultless, these browsers support CSS to a greater extent than any other browser I know of. If you can't get your paws on one of those, you can read on, but the examples will not be as useful.

Let's see what we know about CSS so far:

1. We can specify CSS declarations in the STYLE attribute that applies to most elements
2. The value of the STYLE attribute is a series of semicolon-separated CSS declarations
3. Each declaration consists of a property and a value, separated by a colon

Let's look at those initials again: CSS, Cascading Style Sheets. We covered the Style part already. CSS is used to control the rendering style of HTML elements. Now let's see why they're Style Sheets.

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial5/3.html
Created: August 20, 1998
Revised: August 20, 1998