The World Wide Web (the Web for short) is a massive media revolution, producing not only a massive spike in the US and world economies in the last years of the 20th century, but also empowering individuals and organizations with self-publishing capabilities and a ready-made world-wide audience. Where the printing press gave us the ability to record and distribute information, the Web increased those abilities exponentially, removing the barrier of the commercial publishing system to the production of self-published materials.

Due to its revolutionary nature, the Web has been the subject of massive hype, commercial gold-digging, and genuine advances in human communications; and not in equal amounts. But in spite of the abuses, the Web has blossomed as both a mode of self-expression for countless self-publishers, as well as a viable commercial center and a powerful digital library.

However, the Web is certainly not without its problems. After enjoying half a decade of optimistic growth, the web economy has been fed a dose of reality. Gone are the days of the dot com millionaire made over night with a web server and a good idea. Gone are the days of abundant high-salaried dot com jobs. These are the days of struggling web businesses, fighting to find the proper model that works in these uncharted waters of the Web, slashing costs and cutting payroll.

The economic troubles are not the only challenges facing the Web; there are also technological hurdles that must be leapt, for in the Web's early growth, expediency and pizzazz won over wisdom and solid development practices. Some of the blocks that were laid in the early explosion of web growth were faulty at best, and remain unsuitable as foundations for future building.

Recall that the Web is an interconnected group of computers, from the army of small iMacs and PCs on the desktops of homes and offices around the world, to massive web server farms that feed pages to an ever-increasing audience. On these web servers are documents (web pages), each of which can be connected to other documents via hyperlinks. Web surfers use web browsers, like Netscape's Navigator, Microsoft's Internet Explorer, or the Opera browser, to retrieve and view these web pages from the web servers that serve them.

As you know, the web pages themselves are constructed with a markup language called HyperText Markup Language (HTML). Using a markup language, an author "marks up" a document with structural and other meta-information right along side the document's content. As innocuous as that may sound, HTML is at the center of one of the technological struggles the Web now faces, a struggle which is quickly reaching a crossroads: is HTML to be used as a presentation language, used to define the visual appearance of a web page, or is it to be used as a traditional markup language, defining the structure of documents and leaving layout and visual design to a style language. It's a complicated question, and at its heart lies the subject of this book: Cascading Style Sheets (CSS).

To understand the difference between "structure" and "presentation", consider the following sentence:

"William Faulkner's Sanctuary is one hell of a scary book."

Structurally speaking, the word "Sanctuary" is a book title; in terms of presentation, on the other hand, the word is underlined. This distinction is lost on many because of the ubiquity of word processing applications such as MS Word, which blur the line between structure and presentation. In a word processing application, we don't select the text "Sanctuary" and hit the "book title" button. We hit the "U" button, which underlines it as we wish. In the following sections you'll see why marking up text structurally produces more powerful documents.

CSS is a style language that can be used in conjunction with HTML to define the visual presentation of a web page. "If that's the case", you might ask, "then why is there any question of using HTML as a presentation language?" The short answer is that CSS did not exist until 1996, five years after the birth of the Web, and even now is not fully supported by the dominant web browsers. Thus, web professionals have taken to twisting HTML to suit their own design and presentation purposes, misusing the markup language and adding elements to pages that contribute nothing to the content.

Style languages may also be used to control more than just the visual presentation of documents; for instance, aural browsers can use stylesheets to guide inflection and intonation when reading documents aloud to sight impaired persons. This book will deal nearly exclusively with stylesheets used for visual browsers, but it is important to note that the markup practices recommended herein will also allow you to attach other types of stylesheets to your documents. The Web is bigger than what we can see.

As we'll see shortly, this situation has improved dramatically in recent years, and CSS now represents great hope for the Web's future.

A Short History of the Web

In order to understand why using CSS is vital to the health of the Web, one must know a little history. You may be tempted to skip this section, having probably read similar accounts of the Web's short life countless times. But I encourage you not to skip ahead, but to instead read on and think about the implications of the Web's short but rapidly evolving past.

In 1990, Tim Berners-Lee released the world's first web browser and launched the world's first web server, on which he published for discussion the specifications of many of the technologies that run the Web today over ten years later. His goal in releasing this software was to facilitate the sharing of research documents amongst scientists. He created an SGML (Standard Generalized Markup Language) application that he called HyperText Markup Language (HTML), which was a document format suitable for transmission over his new protocols.

The truly distinctive element of his whole system was the hyperlink, which put the "hyper" in HyperText Markup Language. The hyperlink may not seem all that revolutionary to you now, and in fact even before the Web it had been around as a concept for decades, and experiments in hypertext systems were not new; but before Berners-Lee, no hypertext application had been a part of a network the size of the 1990 Internet, and it was the combination of the network and hypertext that made his experiment a success.

As you know, the hyperlink's power is that it allows random connections between disparate bits of data. It escapes the traditional hierarchical data storage systems of computers, and allows documents to be "linked" to one another in arbitrary ways. It mimics the associative nature of the human brain, which connects memories and thoughts and information through a complex web of inter-connectedness.

The hypertext's usefulness is limited to the pool of data that it links together. Berners-Lee developed a system for linking data from any computer on the Internet to any other computer on the Internet, and in so doing maximized the power of hypertext. For this reason, an essential requirement for the Web as Berners-Lee envisioned it is openness: "I have fought since the beginning of the Web for its openness: that anyone can read web pages with any software running on any hardware. This is what makes the Web itself." (Quote from an email between Tim Berners-Lee and CNET.) As openness increases, so does the power of hypertext, and therefore the Web as a whole.

Berners-Lee invented HTML in order to maximize openness. This simple text document format could be transmitted easily using his new Internet protocols to any computer platform that implemented those protocols. Using standard ASCII text as a file format ensured that existing computer platforms would have no problem handling HTML documents, and choosing to build HTML as an SGML application, which was a platform neutral system for describing the contents of a document, created an open environment for platform specific browser makers.

HTML documents in 1990 were radically different from how they are today. The familiar look of the Web today, with flashing images, animations, and multimedia files, was an unimagined thing of the future. In order to understand how HTML got where it is now, we have to take a closer look at where it came from.

Where did HTML come from?

As stated above, Berners-Lee based his new markup language on SGML, which has a wonderful history of its own.

In the late 1960's Charles Goldfarb left the legal profession to work with IBM where he established the principles of modern markup languages. His goal was to create a system that would enable the specification of documents that could be stored in a database, edited, and output for printing with a minimum of difficulty. The documents themselves were to be stored without any presentational information, containing only content and structural information.

His work, together with that of Ed Mosher and Ray Lorie, resulted in GML (Generalized Markup Language), and was an ambitious effort that overcame incredible obstacles. The task at hand was to apply his knowledge of computing to the storage, retrieval and editing of legal documents. As he remembers it:

"That project required integrating a text editing application with an information retrieval system and a page composition program. The documents had to be kept in a repository from which they could be selected by queries. The selected documents could be revised with the text editor and returned to the database, or rendered for presentation by the composition program."

As you've learned, a markup language is used to markup, or tag, a document's elements with information regarding the elements' structural position in the document. A page header in a markup document, for example, might look like this:

<header>On the Nature of Markup</header>

However, before GML, markup (then called procedural markup) was application specific – the text editor and the page composition program of Goldfarb's project required their own unique markup to process the documents. What GML did was to establish a uniform set of markup tags. Documents so marked up could then be "understood" by all the different applications needed to process the documents. The goal was platform and application neutrality, a system whereby different applications on different platforms could share documents freely.

SGML, the next step in the evolution of markup languages, pushed GML even further with the introduction of Document Type Definitions (DTDs), which allowed the creation of new sets of markup tags for any given set of documents. A validating parser could then read the document type definition, which defined a specific markup system, and ensure the accuracy of the marked up document. Applications could use the document type definition to make sense of the document.

So what does that have to do with HTML, you ask? Well, HTML is an SGML application, a markup language defined according to the rules of SGML. As such, it is intended to communicate the structural meaning of HTML document elements with a set of tags defined in the HTML document type definition. The following is a simple example of a web page, starting with the document type declaration (see the "<!DOCTYPE...") and followed by the HTML markup.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>An HTML document</title>
 </head>
 <body>
  <p>Herein is the lone content of our web page.</p>
 </body>
</html>

As you can see, the content of the page is contained within a nested series of tags, which provide a structural framework for the content. The markup of the page is intended to communicate the semantic relationships of the page's elements to one another.

In this book, we'll be using XHTML as our markup language in all examples. XHTML is a reformulation of the HTML vocabulary as an XML application, which is itself an SGML application. XML was developed to sit in between HTML and SGML, retaining the simplicity of the former while providing some of the power and flexibility of the latter. The Web of the future will rely heavily on XML, and so the W3C has discontinued the development of HTML, recommending instead the migration to XHTML, which will allow documents authored today to be forward compatible with the XML heavy Web of the future.