Cascading Style Sheets in Internet Explorer 4.0

George Young
Microsoft Corporation

October 15, 1997

Editor's note   Most of the examples used in this article require Microsoft® Internet Explorer 4.0. If you are not using Internet Explorer 4.0, you will see the code for calling the specified styles, but not the HTML implementation of it.

The examples demonstrate the output of particular techniques for applying styles. Although these examples may demonstrate the output of embedded or linked styles, they are all coded using inline styles so that we may restrict the style to the example.

Contents

Introduction
Adding CSS to Your HTML Documents
Applying CSS Styles to HTML Attributes
Selectors
Cascading and Inheritance
Some Implications of CSS for HTML Design
Internet Explorer 3.0 vs. 4.0 Compatibility Issues
CSS Reference Table
Conclusion
For More Information

Introduction

With the final release of Internet Explorer 4.0, Microsoft is making good on its commitment to fully support Cascading Style Sheets (CSS), which were introduced in Internet Explorer 3.0. The extended control that CSS gives over Web page presentation and layout in this latest release of the browser is sure to enthrall even the jaded HTML designer.

CSS, for the uninitiated, is a standard for formatting Web pages that goes well beyond the limitations of HTML. Promulgated by the World Wide Web Consortium (W3C), the Internet's standards body, CSS extends HTML with more than 70 style properties that can be applied to HTML tags. With CSS, Web developers have at their disposal a wealth of additional formatting options for color, spacing, positioning, borders, margins, cursors, and more.

Internet Explorer 4.0 includes support for the CSS-1 specification, as well as for proposed CSS-2 properties, such as filters and the cursor property, and for the W3C HTML 4.0 specification, which includes inline styles. (To view these specifications, see the W3C site at http://www.w3c.org/.) For example, the developer can apply the "cursor" property to any HTML element, causing the mouse pointer to change when passed over the element.

<SPAN STYLE="cursor:hand;">When you mouseover this text, the cursor should change to a hand.</SPAN>

Result:

When you mouseover this text, the cursor should change to a hand.

In this article, we'll cover the different approaches to applying CSS to HTML documents and present some of the interesting applications of CSS in Internet Explorer 4.0, with examples. After reading the article, you'll be able to start applying CSS to your own pages and take advantage of Internet Explorer's support for this standard to create stunning pages and formatting effects.

Adding CSS to Your HTML Documents

HTML gives the developer a certain level of control over the formatting of a document. You can set headings (<H1>, <H2>, and so on), make text bold (<B>) or italic (<I>), define lists (<UL> or <OL>), and so forth. However, this level of control is fairly limited. For example, developers have no control over the absolute positioning of items on the page, and they are limited in their ability to control size, spacing, and color of page elements. Seeking to surpass these limits, developers have resorted to workarounds such as converting text to graphics, creating complicated table layouts, using images for white space control, and using proprietary HTML extensions and add-ons.

CSS shatters the HTML barrier by putting at the developer's disposal a set of standard properties specifically geared toward page formatting and layout. These properties are applied to the document without modifying the underlying HTML. Browsers that are not CSS-compliant will still see the page in its unaltered HTML state, while browsers that support CSS will see the page in all its CSS-enhanced glory. (See "Coping with Non-CSS Browsers".)

From the designer's perspective, there are two steps to adding CSS styles to an HTML document: declaring the styles and applying the styles to HTML elements. For example, "I want some blue, bold, italic text" would be a simple declaration, while "I want all my document subheadings to be blue, bold, and italic" would be an application of the style.

Unfortunately, we have to do a bit more than simply utter a few statements in front of the monitor—at least until voice recognition and HTML editing technologies get more sophisticated. We need to understand the syntax of declaring CSS styles and the different ways in which we can apply these styles to our HTML documents.

Once you've mastered these skills, you'll wistfully remember the days when, to change all of your document subheadings to blue, bold, and italic, you had to manually add <FONT COLOR> and <I> tags to each subheading (since it was already displayed as bold by default). With CSS, you just declare one style, and you're done. For example:

H3 { font-color:blue; font-style:italic; }

Imagine the possibilities. . .

Applying CSS Styles to HTML Attributes

You can add CSS properties to your documents in four ways:

1. Using inline styles
   
   
2. Using an embedded style sheet
   
   
3. Using a linked style sheet
   
   
4. Using an imported style sheet

Using Inline Styles

To use an inline style, you add a STYLE attribute to a specific instance of an HTML element, using the following syntax: 

<tag STYLE="property:value; property:value; . . ."></tag>

For example:

<B STYLE="color:navy;">In the navy.</B>

The output will look like this:

In the navy.

An inline style may be applied to any HTML element, from <A> to <XMP>, and modifies only the specific instance (occurrence in the document) of the element to which you apply it. In the example above, only that instance of <B> would be navy—the rest of the <B> tags in the document would be unaffected.

Using inline styles to format a document allows for great precision, but can be pretty tedious to code. If you have a lot of styles, the inline style method can also result in a fair amount of unnecessary code. Inline styles are also somewhat difficult to maintain, because the CSS properties are scattered around the page.

Using Embedded Style Sheets

To use an embedded style sheet, you define a style block (delimited by the <STYLE> and </STYLE> tags), which should be placed in the <HEAD> section of the document. This block consists of a set of style rules, where each rule defines a style for an HTML element or group of elements. A style rule has two parts: 

• A selector that identifies an HTML element or group of elements
  
  
• A declaration of the style properties to be applied to that selector

The generic syntax for a style rule is as follows:

selector { property:value ; property:value; . . . }

Case (or capitalization) is not important in CSS, but syntax is critical. Each style rule must start with a selector or group of selectors, followed by an open brace ({), followed by a set of declarations. Each of these declarations ends with a semicolon and each property is separated from its value(s) by a colon (:), ending with a close brace(}). As with script blocks, it is a good idea to contain style rules within SGML comment delimiters, to hide them from browsers that do not support CSS. For example, the following style rules:

<STYLE>
<!--
B { text-transform:uppercase; }
P { border:silver thick solid; background-color:turquoise; padding:10px; text-align:center; }
-->
</STYLE>

<P>Not every paragraph has a silver lining with a <B>bold</B> outlook.</P>

would result in the following output:

Not every paragraph has a silver lining with a bold outlook.

In the example above, our style sheet has two rules. The first rule declares uppercase text for the <B> selector. The second rule declares a silver, thick, solid border, a background color of turquoise, a padding of 10 pixels, and centered text for the <P> selector. According to this style sheet, all paragraphs (defined with <P>) in the document will have these border, color, padding, and text alignment features, and all bold text defined with the <B> tag will be uppercase (in addition to being bold).

Using embedded style sheets offers greater flexibility and ease of maintenance than using inline styles. For example, if we wanted to change the background color of all paragraphs in the document, we would change only one thing: the value associated with the "background-color" property in the style rule for <P>. The developer can thus quickly experiment with different formatting combinations for the document by modifying existing style rules and adding new ones.

Using Linked Style Sheets

You can keep your style sheet in a separate file and link to it from a document or set of documents, using a <LINK> tag in the <HEAD> section of the linking document, as follows:

<LINK REL="stylesheet" TYPE="text/css" HREF="mystyles.css">

The linked sheet (mystyles.css) consists of a set of style rules, exactly like an embedded style sheet, except that the style rules are not enclosed in the<STYLE> element with comment (<!-- -->) tags. Linking to an external sheet allows the developer to apply a set of styles across a group of HTML documents, thus extending the benefits of embedded style sheets to a set of pages. 

Using Imported Style Sheets

An external style sheet may also be imported into a document by using the @import property in a style sheet:

@import: url(mystyles.css) ;

The @import tag should appear at the beginning of a style block or a linked sheet, before any declarations. Imported style sheets rules are applied before the rules defined for the containing style sheet, putting them at the bottom of the "pecking order" of the importing sheet. (See "Cascading and Inheritance.")

Which Method Should You Use?

You'll probably want to use inline styles when you want to affect the formatting of only a small number of distinct elements, and use style sheets, either embedded or linked, when you want to affect a document or set of documents on a global scale.

You may freely combine the use of linked, embedded, and inline styles in the same document. For example, you might want to have a master list of styles for all documents, which all of your pages link to. On each page, you could then have an embedded style sheet that adds to or modifies the master styles. Finally, you could use an inline style to add to an embedded style or modify it for a few instances of an element on a given page. Wherever the same CSS property is set, the most local declaration takes precedence. More on this idea of precedence in a bit.

Selectors

So far, we've only used the HTML tag name as a selector for applying style rules. Style sheets offer two additional selectors, CLASS and ID, which give the designer additional control over which elements should assume which styles.

HTML Element as Selector

Using the HTML tag as a selector, as we have done in the examples so far, is an excellent way to apply CSS styles if you want all elements of a given type to appear with the same formatting. This approach is the more rigid of the three, but it is an excellent way to enforce formatting consistency across a document. One common use of HTML element selectors is to modify the appearance of hypertext links in the document. The following will cause all instances of the Anchor tag, <A>, to appear without the default underline normally associated with links. For example, this code:

<STYLE>
<!--
A { text-decoration:none; }
-->
</STYLE>

would result in the following output:

This is a link and this in another.

CLASS as Selector

If you expect to have formatting variations for different instances of a single element, or you would like to have different elements share the same format, using a class name as a selector is a good approach. This is often referred to as "sub-classing" an element. CLASS is an HTML attribute that has no display characteristics and that you can apply to any element, like this:

<B CLASS="clsRed">Classy, red, and bold</B>

The style rule for clsRed could be declared as follows:

<STYLE>
<!--
.clsRed { font-color:red; }
-->
</STYLE>

Note that the selector begins with a period (.), which is the required syntax for class names as selectors. If we add the above rule to the style sheet, every element to which we assign a class name of clsRed will have red text. If an element doesn't have this class name, even if it is of the same type as another element that does, it will not have this style applied. For example, this code:

<B CLASS="clsRed">Classy, red, and bold.</B> <BR>
<I CLASS="clsRed">Red italic.</I> <BR>
<B>Just bold</B> and <I>just italic.</I>

would result in the following output:

Classy, red, and bold.
Red italic.
Just bold and just italic.

The choice of class names is one of personal preference; developers can choose whatever naming scheme makes sense. Classes are often defined in terms of their formatting, as in the case above. They can also be defined in other, more generic, terms; for example:

<STYLE>
<!--
.clsImportant { font-color:red; font-weight:bold; text-decoration:underline; }
.clsCode { font-family:Courier; font-size:10pt; }
-->
</STYLE>

The style rule applied to the clsImportant class turns text red, bold, and underlined. Elements of the clsCode class will contain text that is of a specific font family (Courier) and size (10 pt). In both cases, we can go back and change the style declaration to a different color, and the class name will still make sense.

I personally like to preface a class name with "cls" to help identify it as a class name. (This convention is especially useful for scripting.) Obviously, you are free to adopt my conventions or use any other naming scheme you find useful.

ID as Selector

Like CLASS, ID is an HTML attribute that does not affect the display of an element and can be applied to any element. In general, while class names are usually given to groups of element instances sharing some common function or format (relative importance, context, and so on), ID is used to identify one specific instance of an element.

Style rules selected by the ID attribute are declared using the pound sign (#) to precede the selector, as follows:

<STYLE>
<!--
#idPinkP { color:pink; text-indent:10px; font-size:12pt; }
#idBoldItal { font-weight:bold; font-style:italic; }
-->
</STYLE>

<P ID="idPinkP">
...je vois la vie en <SPAN ID="idBoldItal">rose</SPAN>...</P>

Result:

...je vois la vie en rose...

Note that we closed the paragraph with </P>, which tells the browser that the style associated with the <P> element should no longer be applied. You may want to review the " HTML Elements" section of the Internet Client SDK (MSDN Library, SDK documentation) to see which HTML elements have a closing tag.

ID thus serves as a reference to a single instance of an element on the page. As such, you may have noted, using ID as the selector is basically the same as using an inline style for a specific element. The only added benefit of using ID is that all the style declarations can be kept together at the top of the page, which makes it easier to modify existing styles and to keep track of what is going on as you begin applying styles to your documents.

Note   If you are scripting styles, there is an advantage to using inline styles: An inline style property value is exposed as a property value of the style object, whereas a style applied in a style sheet is not. In either case, inline or embedded, you can modify the value of the style object, but you can examine its initial value only if it is set with an inline style.

Grouped Selectors

If more than one selector share the same style, they may be grouped in a single rule, separated by commas. This is done mainly to reduce document weight. For example, if heading levels 1 to 3 share the same font-face and color, we can combine the selectors into one declaration, as follows:

<STYLE>
<!--
H1, H2, H3 { font-family:Tahoma; color:indianred; }
-->
</STYLE>

Contextual Selectors

If you want a given style to apply to instances of one selector inside of another (such as <I></I> tags that occur inside of <B></B> tags), you can declare the style with a contextual selector.

A contextual selector is a series of space-delimited individual selectors in a declaration, such as:

<STYLE>
<!--
H4 I { color:moccasin; }
-->
</STYLE> 

Here, only instances of <I> within <H4> will have the style declared above.

Choosing Selectors

You will probably find yourself using a combination of the selector types above depending on the complexity of the document, the universality of the style property, and your own personal preferences. All three methods may coexist harmoniously, as in the following example:

<STYLE>
<!--
BODY { background-color:ivory; }
P { padding:10px; }
.clsCode { font-family:Courier; font-size:10pt; }
#idPara1 { text-align:right; letter-spacing:2pt; }
#idPara2 { text-align:left; }
-->
</STYLE>

When this stylesheet is implemented with HTML code as follows:

<P ID="idPara1">
Some spacey, right-aligned text.
</P>
<P ID="idPara2" CLASS="clsCode">
Some left-aligned, code-ish looking text.
</P>

We see this displayed:

 

Some spacey, right-aligned text.


Some left-aligned, code-ish looking text.

 

A Note on <DIV> and <SPAN> Elements

Just as CLASS and ID appear to have little use beyond setting styles (and scripting), the two HTML elements <DIV> and <SPAN> are almost exclusively used as containers for CSS properties.

<DIV> and <SPAN>, like CLASS and ID—but unlike other HTML elements—have no inherent display characteristics, with one exception each. <DIV> defines a block consisting of text and HTML tags, and separates this block from surrounding content by line breaks, while <SPAN> is an inline element which "flows" in with surrounding content. A quick example should make this distinction clear. The following code:

<STYLE>
<!--
DIV { background–color: black; color:red; font-weight:bold; }
SPAN { background–color: royalblue; color:white; }
-->
</STYLE>

<P>Some text about to run into a big DIV tag <DIV>I am a DIV</DIV> and narrowly escape.</P>
<P>Some text about to flow seamlessly into a SPAN tag <SPAN>I am a SPAN</SPAN> and make a smooth getaway.</P>

creates the following display:

Some text about to run into a big DIV tag

Some text about to flow seamlessly into a SPAN tag I am a SPAN and make a smooth getaway.

The <DIV> element is used to create a "box" container that the designer wishes to separate from the rest of the document content and (optionally) assign box properties such as borders and margins (see the "CSS Reference Table"). The <SPAN> element is often used to affect just a portion of text within a block-level element, such as a paragraph. You will note also from the sample above that the width of a <SPAN> is limited to the text which it contains, while <DIV>, like <P>, extends by default over the entire width of the page. This is another distinction between box and inline elements. (You can control the width of a <DIV> with the WIDTH style property.)

Using <SPAN> and <DIV> elements to apply styles can be tricky. In general, I recommend limiting the use of these two elements, especially if you need to accommodate browsers that don't support CSS. These browsers won't recognize the tags and, hence, won't be able to do anything with <DIV> and <SPAN>. Any formatting you've applied will be lost. Instead of using a set of sub-classed <SPAN> elements to apply a style to your text, consider using another HTML element, such as <B> or <STRONG>, as your selector in the style sheet. And if you can, try replacing <DIV>s with sub-classed <P> elements. Of course, if you don't need to accommodate non-CSS browsers, you can <DIV> and <SPAN> to your heart's content!

Cascading and Inheritance

Since the technology we are discussing is called Cascading Style Sheets, you may have been wondering when the first of these three words would be mentioned. Now is the time. Simply stated, cascading in CSS specifies how an element instance may properly be affected by styles of different types (inline styles, embedded style sheets, linked style sheets, imported style sheets) and selected in a number of ways (an element tag, class selector, or ID selector). The logic is simple: CSS cascades from general to specific, and from top to bottom.

For example, the following code:

<STYLE>
<!--
BODY { background-color:salmon; }
P { margin-left:20px; }
.clsCode { font-family:"Comic Sans MS"; font-size:10pt; color:navy;}
#idP1 { text-align:left; font-weight:bold; }
-->
</STYLE>

<P ID="idP1" CLASS="clsCode">Multiple styles, no conflicts.</P>

would result in the following output:

 

Multiple styles, no conflicts.
 

The formatting for this paragraph is affected by the style rules for <BODY>, <P>, clsCode, and idP1. These potentially conflicting styles are resolved through the laws of cascading and inheritance.

This means that first, the <BODY>-selected style (background-color) is applied, followed by the <P>-selected style, clsCode, and finally, idP1, with each style taking precedence over the previous one. If we had an inline style defined as well, it would have been applied last, overriding all others. In the cascade, for the same element, a rule with ID as the selector takes precedence over a rule with CLASS as the selector. CLASS, in turn, takes precedence over the HTML element name as selector. This is referred to as "specificity" of the selector. The order of specificity, from greatest to least:

• inline styles
  
  
• ID selector
  
  
• CLASS selector
  
  
• HTML element

Because there were no conflicting style assignments—for example, the background color for the paragraph was set only in the <BODY> rule, and the font size was set only in the clsCode style rule—the styles "trickled down" to the next selector unaltered.

In the case of conflicting assignments with identical selectors, a style selected by a selector of greater specificity takes precedence. For example, let's apply a color value (white) to the #idP1 declaration. This will "conflict" with the color value specified in the .clsCode specification. Since #idP1 has greater specificity, its color (white) will win out over the previously set color (navy). For example, the following code:

<STYLE>
<!--
BODY { background-color:salmon; }
P { margin-left:20px; }
.clsCode { font-family:"Comic Sans MS"; font-size:10pt; color:navy;}
#idP1 { text-align:left; font-weight:bold; color:white; }
-->
</STYLE>

<P ID="idP1" CLASS="clsCode">Multiple styles, one conflict.</P>

results in the following output:

 

Multiple styles, one conflict.

 

This trickling-down, or "pecking order," of styles is governed to some extent by inheritance, which works hand-in-hand with cascading. The rules of inheritance specify which style properties trickle down in the cascade, and which don't. For example, the "font-family" value we specified in the .clsCode rule trickled down because it is an inherited property. Had we applied a "padding" style to BODY, this style would not have been inherited by idP1, because the "padding" property does not inherit. . (See the "CSS Reference Table" for a quick overview of which properties are inherited and which are not.)

You may note in the "CSS Reference Table" that background properties are not inherited. Yet, the "salmon" background-color set in the BODY style rule in our examples appears in the paragraph. This is because the default value for background is "transparent," so while the property itself is not inherited, it "shines through" unless an opaque color is specified for the element(s) in question.

So, style declarations inherit almost all properties from their predecessors (in the cascade) and pass them on unaltered, unless the encountered style declaration sets a value for the same CSS property, as in the example above. This means that you can declare a font-family of "Wingdings" for your <BODY> at the very top of the document, and know that your entire document will have this font.

In summary, cascading establishes the order in which multiple style assignments are evaluated for a given element, and inheritance specifies which style properties are passed on (and which are not) from one element to another.

This is a very brief discussion of cascading and inheritance. There are exceptions to the rules (after all, what's a good law without some elements that break the rules?), and certain properties apply only to a limited number of elements. For more information on cascading and inheritance, please see the relevant sections in both the Microsoft Internet Client SDK and in the W3C CSS-1 specification.

Some Implications of CSS for HTML Design

The extensive level of CSS support in Internet Explorer 4.0 means that developers targeting a popular browser can, for the first time, use CSS as their primary formatting medium, rather than employing nonstandard and time-consuming.

Depending on how you currently author your HTML documents, putting the power of CSS to use may cause you to adopt some interesting new approaches to how you code. I'll mention a few here, and invite you to share your own experiences and insights via the e-mail address at the end of this article.

Return to Basics

Perhaps the most notable and immediate effect of using CSS is that the HTML in your documents becomes significantly cleaner as you lose the need to stuff your document with tags whose sole purpose is layout tweaking (what I call "twags"). An extension of this is that, no longer needing to use "twags" such as <FONT FACE=. . .>, <FONT SIZE=. . .>, and <FONT COLOR=. . .>, you may find yourself returning to long-forgotten basic elements like the full range of heading tags (<H1>. . .<H7>), <STRONG>, <OL>, and others.

CSS allows a return to the basics of HTML, which should bring a collective sigh of relief from designers around the world. You will find that your code becomes lighter, cleaner, and easier to read as you begin to use CSS.

Focus on Structure

Once freed from the tyranny of "twags," you should find yourself able to focus again on having your HTML actually reflect the structure of your documents. The separation of document structure from formatting is one of the great benefits of CSS. You can, for example, define seven levels of headings in "pure" HTML, focusing entirely on their importance in the flow and structure of your documents. Then, with a linked style sheet, you can control the formatting of these headings in a globally consistent fashion.

You want one of your subheadings to be red, small-caps, with a negative margin relative to the document body? No problem. Define this heading according to its function in the document, <H6> for example, and then declare a style in a linked sheet as follows:

H6 { color:red; font-variant:small-caps; margin-left:-5px; }

That's it. Formatting is separated from content, style from structure. The important consideration in designing your documents becomes using basic HTML tags to group elements that share the same function in your documents. The formatting is applied subsequently using CSS.

Rapid Application Development

The combination of simple HTML tags and CSS has another wonderful implication for designers: speed of deployment and prototyping. You can develop a full-blown prototype of a page with much greater control and precision, and in a fraction of the time that it would take if you had to use "twags." In addition, changes in formatting, being separate from document structure, can be completed in the time that it takes to modify a single style rule. This is significantly faster than modifying individual HTML tags in your documents, even for those of you who have mastered the art of global search and replace.

Your boss decides that she wants those <H6> subheadings to be violet in color and lowercase? No problem; change the single style rule's color value and replace the font-variant property with a text-transform property as follows:

H6 { color:violet; text-transform:lowercase; margin-left:-5px; }

Refresh the document and there you go. All instances of <H6> reflect the new style. Happy boss, happy you.

Master Templates

You may even find yourself using the time you save with CSS to be a little creative (gasp) and create a few CSS templates that you can apply to your documents with the virtual flip of a switch. Even if creativity isn't in your job definition, there are significant benefits to creating a template for your HTML documents, including savings in time, improvements in quality and consistency, the ability to quickly prototype and test various formatting options, and the ability to apply theme-based styles.

I've created a sample that demonstrates one possible scripted approach to using templates. (I hope that the functionality of the sample will overcome any aesthetic transgressions I may have committed.) The sample has a menu bar from which you can select one of four named styles, and a script that loads one of the four styles at random when the page is loaded or refreshed. Be sure to take a look at the simplicity of the HTML source code as well as the CSS in the linked sheets.

Click to copy the files for the CSSIE4 sample.

Coping with Non-CSS Browsers

Even if you need to use "twags" to serve lesser, non-CSS browsers, CSS can still be a useful tool for rapid proofing and design. You can use CSS to play with different layouts and color schemes, and then add twags once you've decided on a look. Start with pure HTML, add CSS, and, finally, add the twags for the other browsers.

Internet Explorer 4.0 will interpret the CSS and ignore twags that conflict, while non-CSS browsers will not interpret the CSS, and use the twags. So you'll still get the benefits of rapid development and precise control that CSS provides, while catering to lesser browsers.

Internet Explorer 3.0 vs. 4.0 Compatibility Issues

Due primarily to the evolution of the CSS standard since the release of Internet Explorer 3.0 last August, you may find that CSS-enhanced pages designed for Internet Explorer 3.0 don't render as nicely in Internet Explorer 4.0, and vice versa. I'll cover some basic differences between the two versions and then suggest a solution.

Internet Explorer 4.0 adds support for a number of new CSS properties (these are listed in the "CSS Reference Table"). Apart from these, the major CSS differences between versions 3.0 and 4.0 are in three areas: margins, font-size, and background.

One way to handle these differences is to use a script in the <HEAD> section of your HTML document to detect the browser and link the appropriate external style sheet, as follows:

<SCRIPT LANGUAGE="Javascript">
<!--
  var bIsIE = navigator.appName == "Microsoft Internet Explorer"
  var bIsIE4 = bIsIE && navigator.appVersion.indexOf("4.") > -1
  if (bIsIE4) { 
    sCSS = 'LINK REL="stylesheet" TYPE="text/css" HREF="IE4.css">'
  }
  else {
    if (bIsIE) {
      sCSS = 'LINK REL="stylesheet" TYPE="text/css" HREF="IE3.css">'
    }
  }
  document.write(sCSS)
//-->
</SCRIPT>

CSS Reference Table

The table below provides a comprehensive list of all CSS-1 and CSS-2 properties (a superscript ² indicates a CSS-2 property) supported by Internet Explorer 4.0. Each property is listed by property name, followed by a list of valid values and a sample declaration. The "Applies to" column indicates the HTML element types to which you can assign this property. The "Inherited" column indicates whether the property is inherited by subsequent elements in the document. Finally, the "IE 4" column indicates whether a property is new, improved, or unchanged in Internet Explorer 4.0, as shown below:

Font Properties

These seven properties control typography in the document.

Color and Background Properties

These seven properties control the color of the text and the background, as well as the placement and properties of an optional background image.

Text Properties

These seven properties control text alignment, spacing, and other formatting, such as underline and case (capitalization).

Box Properties

There are 32 box properties that control the formatting of the box associated with block and replaceable elements (as discussed in detail in the W3C CSS1 Recommendation at http://www.w3.org/pub/WWW/TR/REC-CSS1).

Classification Properties

These five properties consist of display and list properties: "display" indicates whether the element is displayed in the document, and the list properties control the formatting of HTML lists, such as <UL> and <OL>.

Positioning Properties

These nine properties provide a powerful level of control over the two- and three-dimensional appearance of elements in the document. CSS positioning merits special coverage both in the Internet Client SDK and in the W3C documents, and is worthy of special study.

Printing Properties

These two properties allow the developer to specify exact locations for page breaks that affect the printing of the document.

Filter Properties

The three filter properties represent another important topic that deserves separate study. Almost all filter properties are applied using scripting.

Pseudo Classes and Other Properties

This catch-all category includes three properties:  the @import property, used to import an external style sheet into an existing style sheet (as explained in Using Imported Style Sheets); the cursor property controls the appearance of the mouse pointer as it passes over the element (as shown in Introduction); and the !important property, used to override the default cascade for a given style. It also contains four pseudo-classes for the A attribute.

Conclusion

Now that you have digested this article (hopefully, without too much heartburn), you are well on your way to creating advanced, visually appealing documents over which you can exercise a high level of control. We've covered the four ways of adding CSS to your documents (inline, embedded, linked, and imported), and the three ways of applying styles to HTML elements (HTML tag, CLASS, and ID). I've also provided a list of all CSS styles supported in Internet Explorer 4.0.

The focus of this article has been on the static aspect of Cascading Style Sheets. Dynamic HTML in Internet Explorer 4.0 allows you to take a step further, by using scripting to dynamically modify the styles in your document. For example, you can change colors when certain events happen, animate HTML elements to move them about the page, and so forth. Please see the links to Dynamic HTML resources below for more information.

Happy styling!

For More Information

For more information on CSS, both in general and as implemented in Internet Explorer 4.0, please refer to the following documents.

Microsoft-related information

Parts of the Internet Client SDK documentation in the MSDN Library (SDK Documentation, Internet Client SDK) cover various aspects of CSS in great detail:

• For a comprehensive list of all CSS properties implemented in Internet Explorer 4.0, read "CSS Attributes Reference".
  
  
• The "Dynamic Styles" section provides a good introduction to using styles with DHTML.
  
  
• For more on positioning, see the "Dynamic HTML" section.

For information on embedding fonts in web pages using @font-face, see the Microsoft Typography site at http://www.microsoft.com/typography/.

For additional information and technical articles on Dynamic HTML, go to the Site Builder Workshop's "Dynamic HTML" section from http://www.microsoft.com/workshop/author/.

Third-party sites

Some fine sources of information on CSS exist on the World Wide Web Consortium (W3C) Web site (http://www.w3.org/). Specifically, see the "Cascading Style Sheets" page at http://www.w3.org/Style/css/, which includes links to CSS specifications and many other resources both on the W3C site and elsewhere.

Some other interesting third-party sites include the following:

• The Web Design Group's "Guide to Cascading Style Sheets" at http://www.htmlhelp.com/reference/css/ is a substantive treatment of various aspects of CSS.
  
  
• The "Web Review's Style Sheets Reference Guide" at http://www.webreview.com/guides/style/mastergrid.html lists the various implementations of CSS in different browsers.