[Chapter 2] 2.12 Style Sheets and JavaScript

2.12 Style Sheets and JavaScript

The very latest browsers also have support for two powerful innovations to HTML: style sheets and JavaScript. Like their desktop-publishing cousins, style sheets allow you to control how your HTML pages look--text font styles and sizes, colors, backgrounds, alignments, and so on. More importantly, style sheets give you a way to impose display characteristics uniformly over the entire document and over an entire collection of documents.

JavaScript is a programming language with functions and commands that let you control how the browser behaves for the user. Now, this is not a programming book, but there are two reasons we mention JavaScript here and cover the language in fair detail in later chapters: First, you embed JavaScript programs ("applets") directly into your HTML documents to achieve some very powerful and fun effects. Second, it is through JavaScript that the folks at Netscape also implement style sheets in their latest browser.

The World Wide Web Consortium--the putative standards organization--prefers that you use the Cascading Style Sheets (CSS) model for HTML document design. Both the latest versions of Netscape (Version 4) and Internet Explorer (Version 3) support CSS and JavaScript, but only Netscape currently supports JavaScript-based Style Sheets (JSS).

To illustrate the differences between CSS and JSS, here are the two ways you can make all the top-level (H1) header text in your HTML document appear in the color red. First, using CSS:

<html>
<head>
<title>CSS Example</title>
<!-- Hide CSS properties within comments so old browsers
don't choke on or display the unfamiliar contents. -->
  <style type="text/CSS1">
    <!--
    H1 {color: red}
    -->
  </style>
</head>
<body>
<H1>I'll be red if your browser supports CSS</H1>
Something in between.
<H1>I should be red, too!</H1>
</body>
</html>

Using JSS:

<html>
<head>
<title>JSS Example</title>
  <style type="text/javascript">
  <!--
    tags.H1.color = "red"
  //-->
  </style>
</head>
<body>
<H1> I'll be red if your browser supports JSS</H1>
Something in between.
<H1>I should be red, too!</H1>
</body>
</html>

The examples are nearly identical, but the devil is in the details. Both have their own peculiar syntax that is unfamiliar to most everyone except programmers. The nastiest detail, however, and one that will drive many an HTML author batty, is that JSS, like its parent JavaScript language, is case-sensitive--type "h1" instead of "H1" in the style description and you ain't gonna see red. Type "h1" in the CSS style description (or in the tag, for that matter) and it still works.

Frankly, we prefer the CSS way for the very reason of its forgiving nature, as we explain in Chapter 9, Cascading Style Sheets, even though JSS is a more powerful and comprehensive accessory. And you may otherwise become quite familiar with JavaScript by using the language to extend the capabilities of your HTML documents. In that case, adopting JSS with its case-sensitive warts may not be all that daunting, maybe even an easy transition (that's perhaps what Netscape is hoping).

You get a taste of the JavaScript language in the above JSS example. It is an object-oriented language. It views your document and the browser that displays your documents as a collection of parts ("objects") that have certain properties that you may change or compute. This is some very powerful stuff, but not something that most HTML authors will want to handle. Rather, most of us probably will snatch the quick and easy, yet powerful JavaScript applets that proliferate across the Web and embed them in our own HTML documents. We tell you how (JSS too) in Chapter 13, Executable Content.