By: Dan Shafer

July 16th, 2003

Reader Rating: 7

We can look at Cascading Style Sheets (CSS) from a number of contextual perspectives.

I prefer to view them as a correction to a fundamental mistake that was made at the beginning of Web Time, back in the old days of the early 1990s, when Tim Berners-Lee and the first pioneering Web builders first envisioned the beginnings of the Web.

What was that mistake?

To meet the requirements of the Web's initially limited purpose, it was not necessary to separate content from presentation. Even though some thought it was a good idea, there was no really compelling, practical reason to recognize this distinction. After all, the Web's early intent was simply to allow a small number of nuclear physicists using disparate systems at various locations to share vital experimental data.

Berners-Lee didn't envision the massively popular, wildly commercialized, extensively morphed Web that emerged from his core ideas in the early 1990s—I doubt that anyone could have.

So, the mistake was a lack of foresight, rather than an oversight. But it was a mistake nonetheless.

This series begins to address in detail the issues surrounding the use of CSS on the Web today. It comprises 4 articles:

Chapter 1: Getting the Lay of the Land [1]

This chapter begins by exploring how CSS technology evolved, and why it's become so popular. We'll explore the basics, including the parts of a CSS rule, the different types of CSS rules, and where these rules can be defined.

Chapter 3: Digging Below the Surface [2]

Chapter 3, the second part in this series, goes on to complete our review of the mechanics of CSS. Here, we'll discuss the use of shorthand properties to group values for related properties into a single statement. We'll delve into the notion of inheritance within style sheets, learn about the structure of a style, and discuss when and how to use CSS comments in your code.

Chapter 4: CSS Website Design [3]

Chapter 4 starts with a discussion of the advantages of CSS-based design. We then highlight a few CSS success stories – sites that have adopted and implemented CSS to their ultimate advantage. We also introduce the sample Website which, though it was initially built in HTML, will be converted to a CSS-based design through the remainder of the chapters.

Chapter 5: Building the Skeleton [4]

Chapter 5 kicks off the conversion of the HTML site to CSS, beginning with a discussion of the site- and page-level issues that we'll need to consider. These include understanding the workings of CSS positioning, and the development of a number of basic page layouts. This chapter shows the steps involved in applying CSS in the real world, as we begin to construct a CSS-based site.

The Book

The 4 chapters in this series are actually only the first part of a book. HTML Utopia: Designing Without Tables Using CSS [5] contains not only the 4 chapters above, but 8 more chapters that cover the precise details of layout, the styling of text and other content, and some of the less common, but important uses of CSS, including improvement of the user experience, and validation and backward compatibility.

The book also includes a complete set of appendices to make it a fantastic reference for CSS based Web page development. For more information, see the book page [6].

If you prefer to read the Adobe Acrobat PDF version of these first four chapters, you can download these four chapters, plus sample reference material, FREE [7].

Your Feedback

If you have a question about any of the information covered in this series, your best chance of a quick response is to post your query in the SitePoint.com Forums [8]. Suggestions for improvement as well as notices of any mistakes you may find (one or two may have slipped through the cracks) are especially welcome – submit these to SitePoint Book Support [9].

Are you ready to delve a little deeper into CSS? Let's get started!

Chapter 1: Getting the Lay of the Land [10]

[1] http://www.sitepoint.com/article/1167
[2] http://www.sitepoint.com/article/1168
[3] http://www.sitepoint.com/article/1170
[4] http://www.sitepoint.com/article/1171
[5] http://www.sitepoint.com/books/css1/
[6] http://www.sitepoint.com/books/css1/
[7] http://www.sitepoint.com/books/css1/signoff.php
[8] http://www.sitepointforums.com
[9] http://www.sitepoint.com/books/
[10] http://www.sitepoint.com/article/1167