2.12 Style Sheets and JavaScript

2.12 Style Sheets and JavaScript

Browsers also have support for two powerful innovations to HTML: style sheets and JavaScript. Like their desktop-publishing cousins, style sheets let you control how your web 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 JavaScript programming book, but we do cover the language in fair detail in later chapters to show you how to embed JavaScript programs into your documents and achieve some very powerful and fun effects.

The W3C — the putative standards organization — prefers that you use the Cascading Style Sheets (CSS) model for HTML/XHTML document design. Since Version 4, both Netscape and Internet Explorer support CSS and JavaScript. Netscape 4 alone also supports a JavaScript-based Style Sheet ( JSS) model, which we describe in Chapter 12, but we do not recommend that you use it. CSS is the universally approved, universally supported way to control how your documents might (not will) usually be displayed on users' browsers.

To illustrate CSS, here's a way to make all the top-level (H1) header text in your HTML document appear in the color red:

<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/CSS">
    <!--
    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>

Of course, you can't see red in this black and white book, so we won't show the result in a figure. Believe us, or prove it to yourself by typing in and loading the example in your browser: the <H1>-enclosed text appears red on a color screen.

JavaScript is an object-based 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 authors will want to handle. Rather, most of us probably will snatch the quick and easy, yet powerful JavaScript programs that proliferate across the Web and embed them in our own documents. We will tell you how in Chapter 12.