Section 2.12. Stylesheets and JavaScript | Data Networks: Routing, Security, and Performance Optimization

2.12. Stylesheets and JavaScript

Browsers also have support for two powerful innovations to HTML: stylesheets and JavaScript. Like their desktop publishing cousins, stylesheets let you control how your web pages looktext font styles and sizes, colors, backgrounds, alignments, and so on. More important, stylesheets 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 W3Cthe putative standards organizationprefers that you use the CSS model for HTML/XHTML document design. All modern GUI browsers support CSS and JavaScript. The ancient Netscape 4 alone also supports a JavaScript Style Sheet (JSS) model, which we describe in Chapter 12, but we do not recommend that you use it. Let's rephrase thatdon't waste your time on JSS. 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.