Doing layout with HTML has got to be the biggest pain in the ass ever invented. If you want a word to be in boldface you have to put <B>...</B> tags around it; if you want the same word italicized, you need more tags. Want it to be larger and a certain font? More tags!! And you have to do the same thing over and over again, tag after tag, each and every single place the text design needs to deviate from the standard, until there are more tags than text and you've developed a repetitive motion injury.

Maybe I've just been spoiled by word processing programs. They make it so easy to change the text design: Just highlight a word — or an entire paragraph or two — in your document, select a style (like italics) and the word's appearance changes. Add another style on top of that one and again you see the results immediately. No tags! Even better, most word processing programs also make it pretty easy to make specific text design changes throughout an entire document using "styles" — a term which can refer to either a particular text style (e.g. bold or centered) or to a collection of these styles (e.g. bold and centered).

The "styles" features of these programs allow you to collect all of the different style attributes you want to apply to similar types of text — titles, headers, captions, and so forth — and give these groups of attributes a common name. For example, you could assign a style called "Title" the attributes: 18pt, bold, italics, and Helvetica. Every time you type a title into your word processor, all you'd have to do is assign it the "Title" style and presto-chango, the text gets all of those attributes assigned to it in one fell swoop. Even better, if you decide a few days later that 18pt type is just too big for the titles, you can simply change the definition of "Title" to a smaller size, and all of the text you've marked as "Title" will change automatically.

Wouldn't it be great if you could do the same thing for your HTML documents? Actually, you can. A new standard called Cascading Style Sheets (CSS) is getting warmed up on the sidelines of the Web to change the way you think about HTML.

How Does CSS Work?

CSS is not some fly-by-night plug-in or piece of hacked code. It's a standard that, like HTML, has been defined by the World Wide Web Consortium. But CSS is not a part of the Hypertext Markup Language Standard: It's a completely separate set of tags which you can use to enhance the meaning of existing HTML tags, to make them do what you want them to do!

Let's take the <P>...</P> container and see what we can do with it. (N.B. Although most of us use a single <P> tag to separate paragraphs, CSS requires the use of the full container.) If left to itself, and depending on how the browser implements it, the <P> container should just put a space between paragraphs. By using CSS, we can redefine the nature of the tag by giving it a new definition, like so:

P

{
font-size: 10pt;
line-height: 20pt;
font-family: helvetica;
color: #FF6600;
}

This new definition of <P>...</P> instructs the browser to display all text delineated within the <P>...</P> container with the following design attributes: 10pt type, double spaced, Helvetica font, and orange. (Notice that CSS uses the more common point size for fonts rather than the arbitrary 1-7 used with the HTML <FONT> tag — another bonus.) The definition, as you can see, starts with the HTML signifier for the tag followed by an opening brace ({), followed by the specific property to be altered, then a colon, then the specification for the property, and finally by a semicolon (required!). This process is repeated as necessary, and then the entire definition is closed with another brace (}).

It's that simple! And no extra tags to clutter up your screen.

If the browser you're using right now is CSS-capable, a paragraph as defined above would look like this (if you do not have a CSS-capable browser you should just see regular text):

The sky above the port was the color of television, tuned to a dead channel. "It's not like I'm using," Case heard someone say, as he shouldered his way through the crowd around the door of the Chat. "It's like my body's developed this massive drug deficiency." It was a Sprawl voice and a Sprawl joke. (Neuromancer, p. 2).

Now, let's say a few days after we've posted our HTML document, we realize that 10pt text is just too small; we want 12pt. Do we have to go back and re-code every paragraph? No! We just change the CSS definition in one place, and the change is reflected in all of the paragraphs on the whole page, instantly!

Even better, CSS code can be placed into an external file (a plain old text file) and then imported into any HTML document, affecting the layout of every HTML file that uses it — potentially an entire Web site. For instance, if you need the titles throughout your entire Web site to have the same look, just set up your CSS in a text file — and then you can set every Web page in the site to access that same file! (More on this another time.)

What can CSS Do?

Want huge letters? Set the font size to 100pt. Want quadruple spacing between lines? Set the line height to 4 times the font size. But, these are not the only properties whose appearance you can set. CSS definitions can also include a wide variety of previously unalterable, or at least difficult to change, style properties such as:

• kerning — the space between individual letters;
  
• leading — the space between lines of text. In other words, double spacing, triple spacing, etc...;
  
• paragraph indents — indent the first line of your paragraphs;
  
• drop caps — text flowing around other text;
  
• margins — padding around text blocks.
  

CSS also adds greater control to your preexisting HTML abilities, such as:

• bold — multiple levels of boldness;
  
• alignment — left, right, center;
  
• fonts — Not only can you specify particular fonts, but if they are unavailable, you can specify generic font families that would work as well (sans-serif, monospaced, serif, cursive, etc...);
  
• font sizes — not just in point sizes, but as percentages;
  
• color — the color of the text, the colors of links: If you can color it, CSS will let you;
  
• background — not just the background color or graphic of the page, but behind specific elements on the page — paragraphs, words, or other graphics;
  
• position — have text space far apart or overlapping: It's your decision. And you can position text wherever you want — horizontally or vertically.
  

In other words, we're talking about a real layout tool, like PageMaker or Quark, for the Web.

Any container tag (i.e. <tag>...</tag>) that affects the layout of the screen can be defined using CSS. This includes not only the <P> tag but also <BODY>, <H[1-6]>, <BLOCKQUOTE>, <PRE>, <UL>, <DIR>, <MENU>, <DIV>, <DT>, <DD>, and <ADDRESS> — it does not, however, include the <BR> tag.

Who is Using CSS?

The CSS standard has been around for over a year, and has been adopted by the two big browsers (Netscape Navigator and Microsoft Internet Explorer). IE 3.0 has partial support of CSS, while Navigator 4.0 supports the CSS standard along with its own JavaScript style sheets. Unfortunately, this leaves anyone using Navigator 3.x (or the few other browsers available) out in the cold.

Why should you use Cascading Style Sheets if there are still a lot of people out there who can't see any difference? Look at it this way: Eventually everybody's browser will support CSS. And in the meantime, your use of CSS will in no way interfere with the appearance of your Web pages on browsers that don't have the good sense to support them. Of course, this means that if you want your styles to appear on non-CSS browsers, you have to code them in the old fashioned way: one tag at a time.

Next time on CSS Theater: Jason Teague explains how CSS works and what all this "cascading" stuff really means.

Jason Conrad Cranford Teague ([email protected]) just moved to England. He doesn't have a phone number, he doesn't have a real job, he doesn't even have an address (yet), but he does have an ISP. Jason wrote How To Program HTML Frames: Interface Design and JavaScript, and is getting ready to write the Hip Pocket Guide to Dynamic HTML. He is a frequent contributor to Tripod's Computers/Internet.