FireBlade Book Review: Cascading Style Sheets: The Definitive Guide

Review by Jerry Stratton, 7/23/2001

All it takes is a quick glance at any corporate web site's page markup. The sheer amount of markup in comparison to actual useful information is astonishing. Even worse, for most sites, the markup is almost entirely made up of tables and FONT tags, none of which conveys any real semantic meaning to what’s being presented. From a structural standpoint, these pages are little better than random strings of letters.

Cascading style sheets really kick ass. Once you start using them, you’ll find it hard to imagine what you did without them.

Add a single line to each of your web pages and you suddenly have full control over the stylistic appearance of your web pages from a central file:

<LINK REL="StyleSheet" HREF="/css/reviews.css" TYPE="text/css" MEDIA="screen">

If you then add, in your /css/reviews.css file, a set of lines like:

H1 {
	font-family: Bahamas,Kids, sans-serif;
	font-variant: small-caps;
	color: Green;
}

Suddenly all of your web pages that reference this file will show level one headlines in Bahamas, small caps, and green text. Add another line that says “text-align: right;” and your level one headlines will all be aligned to the right--no re-uploading of all thirty-six review pages, you upload the one style sheet and all your review pages immediately change their styles.

Even more cool is that you can set “sub-types” of styles. So if you want to have a special paragraph style for author line in your reviews, you would make your paragraph code be “<p class="author">” instead of just “<p>” and then add the following set of lines to your style sheet:

p.author {
	text-align: right;
	font-style: italic;
}

Now, every paragraph whose class is “author” will follow this style. Later on, if you want it centered, or in a different font, or bold instead of italic, you can make the change to your single style sheet, and it will apply to all web pages which reference that style sheet.

And style sheets allow you to do much, much more. They give you more control over the stylistic presentation of your web pages while at the same time they remove the need for style code within your web pages. You can concentrate on making your web pages present content and content-based markup, and put the style-based markup elsewhere, where it belongs.

Eric A. Meyer is one of the experts who worked on creating the cascading style sheets standard. His “Cascading Style Sheets: The Definitive Guide” is published by O’Reilly, who make so many of the best “definitive guides” for web design and computer programming. (The cover has two salmon on it.)

The book starts with a description of the differences between a structural language, which is what HTML was supposed to be, and a presentational language, which it has become, to the detriment of universal readership. Meyer goes into detail about why it is important to separate structure from presentation. Structural markup makes it easier to find things on the web; it makes it easier for alternative browsers to develop--browsers that let users view the web through an outline mode instead of a page mode, or browsers that let the blind hear web pages, or that display web pages on tiny screens such as most PDAs.

And because HTML wasn’t really designed for presentational markup, it doesn’t do a good job of it. But CSS provides for a very rich set of stylistic markups. It can position, for example, our headlines not only aligned to the right as you can do with HTML, but also boxed to the right, with an image behind it, and the paragraph text it applies to wrapping around it on the left and a solid black border between the text and the headling. Not just possible, but easy.

h1 {
	float: right;
	width: 25%;
	border-left: medium solid;
	background-image: url(/Graphics/Backgrounds/Flock-Grey.gif);
	text-align: right;
}

Problems? Sure. The above won’t display as you expect it to in browsers that don’t support cascading style sheets, or that don’t support them fully. But if you’re a real web designer, that isn’t really a problem. Because you’ve used h1 as the base markup, all web browsers will display the headlines as headlines. They won’t be displayed as a bordered sidebar, but they will be displayed as headlines--whether the display is on a computer screen, a PDA readout, a television screen, a reader for the blind, or a search engine’s indexing routines.

You get the best of both print and non-print: you can specify styles that give you nearly full control, and you can do so in a manner that works in all browsers. (There is also a very short discussion of the fact that style sheets are not limited to ‘standard’ browsers. You can have style sheets for different types of browsers; one for computers, one for PDAs, one for printers, one for voice readers, etc., if you want to.)

With this power comes greater responsibility. In the past, you had to try hard to make your pages unreadable to large numbers of readers. With CSS, you can make your pages unreadable to those whose browsers support CSS much more easily. You can very easily start setting tiny font sizes, incompatible background and foreground colors, and text positions that overlap, to the point that it looks really cool at first glance and completely unreadable for anyone who actually might want to purchase something from you.

The rest of the book after the first chapter goes through how to use cascading style sheets in your documents, starting with the very basic rules for creating style sheets and applying them to your HTML markup.

When you understand the structure of HTML (as explained in chapter 2) you will be able to best use style sheets. In the past, we’ve been allowed to make very unstructured HTML documents: not closing our “<p>” paragraph tags, for example, and not closing “<li>” list item tags. With style sheets, we need to be more careful: anything that can take a style needs to have a closing tag, so that the browser knows where the style ends.

How to tell how well your browser supports styles? If it supports styles well, this paragraph will be displayed so as to standout from the rest of the paragraphs. It will have an italicized first line and a red stylized drop-cap for the first letter. I did this by specifying a style for the “first-letter” and “first-line” pseudo-elements of a “sidebar” class. This paragraph will also be indented on both the right and left, and have solid black bars on the top and bottom. If it doesn’t work, you’ll see this paragraph as a perfectly readable normal paragraph. (You can view the source of this document to see the two style definitions just above this paragraph. If your browser really doesn’t support styles, you’ll see the STYLE tag without having to view source.)

After the basics, he discusses the importance of “units and values”. In the past we have often made the mistake of specifying exact values for things like the size of our page, resulting in odd looking pages as monitors get both bigger (for computers) and smaller (as browsers become available for television sets and PDAs). There are absolute units, such as inches or centimeters, and relative units, such as percentages, and the ‘em’ and ‘ex’ units. I used the ‘percentages’ unit above to make the drop-cap three times the height of the line. No matter what font or font size is used, the drop cap will (almost always) be a three-line drop. There are also specifications for color and for sound for browsers that read).

After those two introductory chapters, he gets into the nitty-gritty of modifying text properties, box properties, fonts, colors, headings, background colors and images, and an indepth discussion of margins and padding for your ‘boxes’ (similar to tables, but solely for laying out pages).

The back of the book contains a reference to style sheet properties, and a “support chart” that describes how well each property is supported by the major visual browsers.

If you’re doing web pages that use stylistic enhancements, you should really be using style sheets and this book will get you there. If you understand HTML, you will find CSS a snap to use.

Recommendation: Special Interests Only

Buy Cascading Style Sheets: The Definitive Guide at Amazon!
Search for more items by Eric A. Meyer

Comments?

If you have comments or questions about this page, please, leave a message on the Negative Space Comments Page.

Jerry

FireBlade Coffeehouse DVD Movie Reviews

In Association with Amazon.Com