Cascading Style Sheets (CSS) represent a major breakthrough in how Web-page designers work by expanding their ability to control the appearance of Web pages, which are the documents that people publish on the Web.

For the first few years after the World Wide Web (the Web) was created in 1990, people who wanted to put pages on the Web had little control over what those pages looked like. In the beginning, authors could only specify structural aspects of their pages (for example, that some piece of text would be a heading or some other piece would be straight text). Also, there were ways to make text bold or italic, among a few other effects, but that’s where their control ended.

In the scientific environments where the Web was born, people are more concerned with the content of their documents than the presentation. In a research report, the choice of typefaces (or fonts, as we call them in this book) is of little importance compared to the scientific results that are reported. However, when authors outside the scientific environments discovered the Web, the limitations of Web document formats became a source of continuing frustration. Authors often came from a paper-based publication environment where they had full control of the presentation. They wanted to be able to make text red or black, make it look more spaced out or more squeezed, to center it or put it against the right margin, or anywhere else they wanted. Many Web designers have a desktop-publishing background, in which they can do all these things and more to improve the appearance of printed material. They want the same capabilities when they design Web pages. However, such capabilities have been slow to develop – slow by Internet speed standards, that is. So, designers devised techniques to sidestep these limitations, but these techniques sometimes have unfortunate side effects. We discuss those techniques and their side effects later in this chapter.

CSS also works with XML, which is another document format for the Web. See next Chapter, “XML Documents,” for how to use CSS and XML together.

This book discusses a new method to design Web pages. CSS works with HTML (the HyperText Markup Language), which is the primary document format on the Web. HTML describes the document’s structure; that is, the roles the various parts of a document play. For example, a piece of text may be designated as a heading or a paragraph. HTML doesn’t pay much attention to the document’s appearance, and in fact, it has only very limited capability to influence appearance. CSS, however, describes how these elements are to be presented to the document’s reader. Now, using CSS, you can better specify the appearance of your HTML pages and make your pages available to more Web users worldwide. CSS greatly enhances the potential of HTML and the Web.

A style sheet is a set of stylistic guidelines that tell a browser how an HTML document is to be presented to users. With CSS, you can specify such styles as the size, color, and spacing of text, as well as the placement of text and images on the page. CSS can also do much more.

A key feature of CSS is that style sheets can cascade. That is, several different style sheets can be attached to a document and all of them can influence the document’s presentation. In this way, an author can create a style sheet to specify how the page should look, while a reader can attach a personal style sheet to adjust the appearance of the page for human or technological limitations, such as poor eyesight or a personal preference for a certain font.

CSS is a simple language that can be read by humans, in contrast to some computer languages. Perhaps even more important, however, is that CSS is easy to write. All you need to know is a little HTML and some basic desktop-publishing terminology: CSS borrows from that terminology when expressing style. So, those of you who have experience in desktop publishing should grasp CSS quickly. But, if you’re new to HTML, desktop publishing, or Web-page design, don’t despair. You are likely to find CSS surprisingly easy to grasp. This book includes a brief review of basic HTML and tips on page design.

To understand how revolutionary CSS is, you first need to understand Web-page design as it has been and the problems that CSS can help solve. In this chapter, we begin with a brief tour of the Web and the problems Web designers and others have faced prior to the introduction of CSS. Then, we quickly review the basics of HTML. For those of you who are already publishing on the Web, this all may be old news. For those of you who are new to the idea of designing Web pages, this helps put things in perspective. In next Chapter, we step you through the basics of how to use CSS. In subsequent chapters, we delve more deeply into CSS, covering how you can specify the text, background, color, spacing, and more in the design of Web pages.

The Web

The Web is a vast collection of documents on the Internet that are linked together via hyperlinks. The Internet consists of millions of computers worldwide that communicate electronically. A hyperlink is a predefined link between two documents. The hyperlinks allow a user to access documents on various Web servers without concern for where they are located. A Web server is a computer on the Internet that serves out Web pages on request. From a document on a Web server in California, the user is just one mouse click away from a document that is stored, perhaps, on a Web server in France. Hyperlinks are integral to the Web. Without them, there would be no Web.

Users gain access to the Web through a browser. A browser is a computer program that lets users browse – or “surf” – the Web by fetching documents from Web servers and displaying them to the user. To move from one document to another, the user clicks a highlighted (often underlined) word or image that represents a hyperlink. The browser then retrieves the document that is at the other end of the hyperlink and displays it on the screen. For example, a user could be in a document about baroque music and click the highlighted words Johann Sebastian Bach that are linked to “Bach’s home page.” (On the Web, all celebrities – and everyone else who wants one – have a home page.) After the browser fetches Bach’s home page (instantly, in the best case), it appears on the user’s screen.

Development of the Web

The Web was invented around 1990 by Tim Berners-Lee with Robert Cailliau as a close ally. Both of them were then working at CERN, which is the European Laboratory for Particle Physics. Tim is a graduate of Oxford University and a long-time computer and software expert, and is now the director of the World Wide Web Consortium (W3C), an organization that coordinates the development of the Web. He also is a principal research scientist at Massachusetts Institute of Technology’s Laboratory for Computer Science and Artificial Intelligence (MIT CSAIL). Robert is a 30-year veteran at CERN, where he still works. Robert organized the first Web conference in Geneva in 1993. Both Tim and Robert were awarded the ACM Software System Award in 1995 because of their work on the Web. (Robert wrote the Foreword to this book.)

Tim created the language HTML, which is used by people to exchange information on the Web. We discuss what HTML is in the next section and give a brief review of its basics later in the chapter. Tim also began work on style sheets soon afterward, but when the Web really started taking off in 1993, the work on them was not complete.

The world outside scientific laboratories discovered the Web around 1994. Since then, the Web’s growth has been tremendous. Had style sheets been available on the Web from its beginning, Web-page designers would have been spared much frustration. However, releasing CSS1 two years later did offer some advantages. First, in the interim, we learned much about what visual effects Web designers want to achieve on their pages. Second, we learned that users also want their say in how documents are presented on their computer screens; for example, the visually impaired may want to make fonts bigger so that they can be read more easily. As a result, we were able to provide functionality to meet as many of these needs as possible, and even more was added when CSS2 was issued in 1998. Hence, the CSS of 1999 is a better solution than a style-sheet solution years earlier would have been.