Cascading Style Sheets - The New Backbone of Great Webs

By: Alan Barasch

So, you've built your killer Web site and you're ready to proclaim it to the whole world. How did you format the look? Did you begin every paragraph with a <FONT> tag? If you're like most new Web authors, you've probably specified fonts and colors throughout your site. You did a lot of manual things to make each page look the way you wanted it.

Well, here's a better way. Cascading Style Sheets (CSS) is a simple mechanism for adding style; including fonts, colors, and spacing to Web documents. CSS lets authors define style rules in one place that are then applied to many HTML elements. These style rules can influence the rendering of colors, alignments, borders on tables, margins and heading levels. Style rules can define a custom image (such as a corporate logo) for a list bullet, a background color or positioning Properly defined, CSS can set a paragraph to "float" to a specified position. Table elements can be precisely defined. And the biggest one, fonts and sizes, can be globally defined. In other words, CSS can make the job of a Webmaster or author substantially easier.

A Little History

Cascading Style Sheets have been around since 1996 when they became a recommendation of the World Wide Web Consortium (W3C). W3C are the people who develop interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential.

There are a number of ways styles may be used in Web pages. One of the most popular is "Linked." By using Linked styles, an external CSS document is held somewhere on your site and changing it one time changes that element anywhere it occurs in pages calling that particular CSS.

Styles may also be "Embedded." That is, they are defined right on the Web page, generally in the <HEAD> area at the top of the page. The downside of this is that if you like what you have done, it has to be copied over and over to every page.

The last method of CSS is "Inline," where the styling is set for a specific item. This takes precedence over all other styling applied to the page. An example is:

<P style="font-size: 14pt; color: fuchsia">Styles are grand?</P>

This is a great time to talk about precedence. As we have seen, you may have many levels of CSS in your Web page. The linked styles are at the bottom of the hierarchy. There can be multiple linked files, but the last one in the list takes precedence. Generally when one has multiple linked style sheets, they define different elements. The Embedded styles come next and can override anything in a linked style sheet and then Inline are at the very top.

Building a Style

A Cascading Style Sheet is simply a text file. Sure, there are lots of fancy editors on the market; I have even been known to use Visual Studio for editing some CSSs but they are not necessary. All you really need to get started is Notepad.

In my simple example, I will "inherit" the parts of a H1 heading element and then define the color and font:

H1 { COLOR: #cc0000; FONT-FAMILY: Arial, Helvetica, sans-serif; }

Within my linked style sheet, the color of H1 has been changed to hex color CC0000 or dark red and the font should be Arial, if available, followed by Helvetica and if neither is on the system, use the system sans-serif. Further down in my style sheet, I define a paragraph that has a pink background.

.PinkPara { FONT-STYLE: Oblique; FONT-FAMILY: Georgia,"Times New Roman", "MS Serif"; BACKGROUND-COLOR: #ffccff; }

In the body of my web page, I use <DIV CLASS="PinkPara">my text</DIV> so that the text is formatted with its lovely pink background. I designed it this way so that it would stand out from the rest of the text.

Styles may be nested within each other but the usual HTML rules apply: You should close the elements in the order in which they were called. There are a lot more things that can be done with our CSS and will be covered in subsequent articles. CSS has been expanded and in the future, it has rules for handheld devices, print, projection, and printing. We all see Web pages that are beautiful but have many styling mistakes. Cascading Style Sheets can eliminate these mistakes and allow an author to correct an entire site with just a few keystrokes.