Using Cascading Style Sheets

Robert B. Hess
Software Design Engineer
Microsoft Corporation
January 10, 1997

In this article, I will assume that you are familiar with Style Sheets: A Brief Overview for Designers and A User's Guide to Style Sheets. I'm going to avoid duplicating any of the information those articles contain, and point out some issues of working with cascading style sheets (CSS) that they might not have addressed.

What is CSS?

HTML was originally designed to describe the informational structure of a document. Its tags and attributes were used to identify what was a header, list, and other structural aspects of a document. This didn't give the author true control of what a document would look like when rendered by the browser.

Then people started adding all sorts of tags to HTML that enabled it to describe some visual aspects of documents. It was soon evident that trying to describe both a document's structure and its layout using the same language would become a pretty big mess, because the associated concepts and needs are entirely different.

Cascading Style Sheets, Level 1 is a specification from the World Wide Web Consortium (W3C) that describes how to specify the visual layout features of a document. CSS enables you to control the margins, coloring, background images, fonts, and a whole range of elements for virtually every individual element that an HTML file describes (<BODY>, <HEAD> (header), <P> (paragraph), <UL> or <OL> (lists), <TABLE>, and so on).

For a quick illustration of some of the possibilities, check out the image that stretches across the top of this page. Essentially, it is just a tiled image, but it is tiled only horizontally (not vertically). The code I used to tile the image:

BODY {background:ivory url(torn.gif) repeat-x;}

This code sets the background property for the <BODY> tag. If I replaced the word BODY in that code above with P, then every paragraph in my document would have the torn-paper background across its top.

Implementation Limitations

The CSS specification covers a lot of features: In addition to control over margins, coloring, background images, and fonts, the specification also describes how to control borders, white space, letter spacing, padding, and even compound properties such as first-letter and first-line formatting. Unfortunately, Internet Explorer 3.0 was not able to implement every CSS feature in the first release; some of the more advanced features will be supported in an upcoming release.

A User's Guide to Style Sheets provides a good overview of features implemented in the current release of Internet Explorer and the technical aspects of adding CSS support to your pages.

Marginal Issues

Cascading style sheets allow you to specify individual margins for all HTML elements. For example, this code sets a one-inch margin for the left side of the document:

BODY {margin-left:1in;}

This code creates proper paragraph indentation:

P {margin-top:-10pt; font-size:12pt;
text-indent:.25in}


P.first {text-indent:0}

It sets paragraphs to be -- by default -- raised toward the top of the page 10pt (almost one full font-size), which removes the blank line of padding normally used to separate paragraphs; and indents the first line of each paragraph by .25 inches. Changing the margin-top works only because I have specified the font-size to which the margin is relative. I also define a paragraph class named "first" because I don't want to indent the first paragraph of each section. For example, I use the paragraph style in the first paragraph under "Pixels, Points, and Inches" below.

When you set margins, be careful to address the difference between how Internet Explorer 3.0 and 3.01 render margins. I've prepared another article, Updated Margin Usage in Style Sheets, that describes this difference and how to code your pages to display properly in both versions of the browser. Breifly, in Internet Explorer 3.0 margins weren't quite properly inherited between a parent element and a child element, and this was fixed in the 3.01 update. You can determine which version of the browser you are running by choosing About from the Help menu. Internet Explorer 3.01 reports itself as IE 3.0 (4.70.1215). (The trailing "1215" in that string is the build number; the higher that number, the later the version.)

Pixels, Points, and Inches

You can specify sizes and spacing of your text and graphics in many ways. Let's take a look at an example:

H1 {margin-left:1in;font-size:28pt;
line-height:75%;}

In this example, I specify the sizing to associate with a level 1 header in three ways: inches, points, and percentage. Although I could have written this code in other ways, the methods I use here are appropriate for what I want to accomplish. To describe distances or other forms of spatial relationships, it is best to use a standard ruler measurement, such as in (inches) or cm (centimeters). Although I could have done the same thing with margin-left:72pt, it is usually best to use pt (points) only when dealing with measurements of fonts or line spacing. Specifying point size is a tricky business, and not fully understood by many people. For example, assuming there are 72 points in an inch, if you were to select a 72-point font, how tall (in inches) would an "M" be?

Note that I specify the line-height property as a percentage. When using percentages, the question "Percentage of what?" arises. Sometimes the percentage is of the current font size, sometimes the current page size, and there are times when it is a percentage of something else. In this case, I know that the length unit associated with line-height is the current font size, so I will compress the line height associated with headers by 75% relative to the currently selected font size (28pt).

If you look at many pages that use CSS, you may also notice the use of px (pixels) for a measurement unit. In most cases, avoid specifying your measurements in pixels, because a pixel can be different sizes on different screen displays (not to mention printers). The CSS specification tries to adjust for this:

[Cascading Style Sheet Specification: 6.1 Length Units]
If the pixel density of the output device is very different from that of a typical computer display, the [browser application] should rescale pixel values. The suggested "reference pixel" is the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm's length.

You can see that what a pixel measurement really means can vary and lead to some confusion. Therefore, avoid using it unless you are certain it's what you want.

Line-Height Spacing

If you've looked at the code for this page, you've noticed that I use the line-height property to make the paragraph layout on this page expand a bit. This handy capability helps the Web page designer control the readability and flow of the document.

To understand what the line-height property does for you, find a piece of ruled paper. You know—that white paper with the light blue rules, with perhaps a red line showing you where the margins are.

This is just
a simple example
of text on ruled paper.

The line-height property defines the vertical distance between two blue lines (rules). In the example above, to get the text to properly draw over the ruled paper bitmap, I set the line-height to 20px because the bitmap is 20 pixels tall. By default, the line-height is the same as the current font-size, because in typographical notation, font size refers to the recommended baseline-to-baseline distance for the given font. If your current font-size is set to 12pt, you will get the effect of double-spaced text by setting the line-height to 24 pt. An easier method is to specify the line-height as 200%; then you don't have to worry about the current setting of the font-size.

Be careful when using line-height; you can easily get your line spacing set incorrectly. For example, because Internet Explorer uses the line-height setting to define the height of the entire table, chances are very good that your tables will not render correctly if you set a line-height for the <BODY> element. It is best to keep your line-height specification down in the lower-level elements such as paragraphs, or within individual <SPAN> or <DIV> specifications. If you see a bunch of your text written over itself, chances are good that the line-height is set incorrectly.

Backward Compatibility

Many people feel that they can't use cascading style sheets if they want their pages to be visible to people using non-CSS-aware browsers. Although you may find CSS-based pages that look bad when viewed on a non-CSS-aware browser, with just a little work you can make your pages look great in CSS and fine in other browsers. For example, on this page I am using CSS to add the torn-paper image at the top, and to control font selection and line spacing. If you view this page in a non-CSS-aware browser, the information will be intact and perfectly readable. If I specify the BACKGROUND attribute in the <BODY> tag, I could supply a tiled background image that would display only in a non-CSS-aware browser.

Another effect that CSS allows you to implement, and which you can make backward-compatible, is

Shadowed Text.

This is accomplished by using two copies of the text in the document: one in a dark color (black) and one in a light color (#CCCC99). Simply adjust the left and top margins, forcing the second instance of text to draw almost directly over the first instance of the text. Unfortunately, a non-CSS-aware browser will display this as text listed multiple times. To avoid this, use Visual Basic® Scripting Edition (VBScript) to provide the code for all but one of the layers. Take a look at the source code for this page to see how I do this.

If you find other features of CSS that you'd like to use but are concerned about backward compatibility, try using VBScript. Because Internet Explorer is currently the only browser that supports both CSS and VBScript, it provides authors the quickest and easiest method for controlling how their Web pages display.

Layered Elements

By carefully manipulating the margins of elements, you can create interesting layering effects. If you've experimented with this, you may have run into the problem of one layer appearing to erase the layer it is being drawn over. I had this problem with several pages I've created, and after a lot of head scratching I figured out how to fix it.

It appears that there is a minor bug in how the <BODY> element is being rendered. Try starting the page with code similar to this:

<BODY>


<TABLE WIDTH=100% HEIGHT=100% CELLPADDING=0 CELLSPACING=0
CLASS="BODY"><TR><TD>


...your page code would then go here....


</TD></TR></TABLE>


</BODY>

This will (usually) fix the problem because it is moving the rendering into the <TABLE> element. Note also the use of CLASS="BODY". This doesn't have anything to do with the layering problem, but is a work-around for a different <BODY> tag rendering problem: If you use a linked style sheet, you can't set the background color for the <BODY> tag. To fix this, use the above code and assign the styles to the .BODY class. This slight rendering problem will be fixed in an upcoming release of Internet Explorer, but the above code will continue to work fine.