Cascading Style Sheets in Internet Explorer 4.0

George Young
Microsoft Corporation

Updated: October 15, 1997 for Internet Explorer 4.0 final release
(see Changes section below)

Contents
Introduction
Adding CSS to Your HTML Documents
Applying CSS Styles to HTML Elements
   Using Inline Styles
   Using Embedded Style Sheets
   Using Linked Style Sheets
   Using Imported Style Sheets
   Which Method Should You Use?
Selectors
   HTML Element as Selector
   CLASS as Selector
   ID as Selector
   Grouped Selectors
   Contextual Selectors
   Choosing Selectors
   A Note on <DIV> and <SPAN> Elements
Cascading and Inheritance
Some Implications of CSS for HTML Design
   Return to Basics
   Focus on Structure
   Rapid Application Development
   Master Templates
   Coping with Non-CSS Browsers
Internet Explorer 3.0 vs. 4.0 Compatibility Issues
CSS Reference Table
   Font Properties
   Color and Background Properties
   Text Properties
   Box Properties
   Classification Properties
   Positioning Properties
   Printing Properties
   Filter Properties
   Pseudo-Classes and Other Properties
Internet Explorer 4.0 CSS Examples
Conclusion
For More Information

Note: Most of the examples used in this article require Internet Explorer 4.0 .

Changes in this release

New information about using imported style sheets.
New sections on grouped and contextual selectors, and on coping with non-CSS browsers.
Added information about the new !important property and four pseudo-classes to the Other Properties section.
Added a few new links to the For More Information section.
Revisited some of the Internet Explorer 4.0 CSS examples.

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 CSS2 specification , and for the W3C HTML 4.0 specification , which includes inline styles. 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;">Give this span a hand.</SPAN>

Result:

Give this span 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 samples. 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>,…), make text bold (<B>) or italic (<I>), define lists (<UL>, <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 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 towards 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, perhaps like this:

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

and you're done. Imagine the possibilities…

Applying CSS Styles to HTML Elements

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

Using inline styles
Using an embedded style sheet
Using a linked style sheet
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>

Result:

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 TYPE="text/css"> 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 semi-colon 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:

<STYLE TYPE="text/css"><!--

  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>

Result:

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 selector <B> (bold). The second rule declares a silver, thick, solid border, a background color of turquoise, a padding of 10 pixels, and centered text for the selector <P> (paragraph). 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 contain uppercase text (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> above. 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:

The linked sheet (mystyles.css in the example above) consists of a set of style rules, exactly like an embedded style sheet, except that the style rules are not enclosed in <STYLE TYPE="text/css"></STYLE> and 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 on a linked sheet, before any declarations. Rules in imported style sheets are applied before other 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:

<STYLE TYPE="text/css"><!--

  A { text-decoration:none; }

--></STYLE>

This will cause all instances of the Anchor tag, <A>, to appear without the default underline normally associated with links.

Result:

This is a link and this is 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 TYPE="text/css"><!--

  .clsRed { 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.

<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>

Result:

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 TYPE="text/css"><!--

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

--></STYLE>

The style rule applied to class clsImportant turns text red, bold, and underlined. Elements of class clsCode 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.) Again, 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 TYPE="text/css"><!--

  #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.

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 to scripters: 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 TYPE="text/css"><!--

  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 drill-down to the desired content with a contextual selector.

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

<STYLE TYPE="text/css"><!--

  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 TYPE="text/css"><!--

  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>

Here's what a paragraph of class name clsCode and ID idPara2 will look like:

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

Result:

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:

<STYLE TYPE="text/css"><!--

  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>

Result:

Some text about to run into a big DIV tag

I am a DIV

and narrowly escape.

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

A <DIV> 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 CSS Reference Table). <SPAN> 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>, so 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 style sheets we are discussing are called Cascading Style Sheets, you may have been wondering when the first of these three words would finally 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 style, embedded style sheet, linked style sheet, imported style sheet) and selected in a number of ways (element tag, class, ID). The logic is simple: CSS cascades from general to specific, and from top to bottom.

Take the case of our paragraph with the ID idP1 below:

<STYLE TYPE="text/css"><!--

  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>

Result:

Multiple styles, no conflicts.

idP1's formatting 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, is: (1) inline styles; (2) ID; (3) CLASS; and (4) HTML element.

Since 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).

<STYLE TYPE="text/css"><!--

  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>

Result:

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 above 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.

You may note in the CSS Reference Table below that background properties are not inherited. Yet, the "salmon" background-color set in the BODY style rule in our examples above 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. (See the CSS Reference Table below for a quick overview of which properties are inherited and which are not.) 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 in that order.

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 on this site and in the W3C CSS2 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 other non-standard and time-consuming approaches such as those mentioned in the introduction to this article.

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 document.

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 such.

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 sub-headings to be red, small-caps, with a negative margin relative to the document body? No problem. Define this header 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, as you design 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 42 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. For those of you who'd like to download and play with the code, I've also provided a zip archive of the HTML document and linked sheets.

View the template sample (requires Internet Explorer 4.0).

Download the zipped files (8K).

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 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 which 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.

Area	3.0 Behavior	4.0 Behavior
Margins	Value is in addition to the default for the element.	Value is absolute for the element (default will not apply).
Font size (specified as percentage)	Value is relative to the element's default size.	Value is relative to the parent element's font size.
Background (in block elements such as <P> and <DIV>)	Fills the color behind the text only.	Fills the color to the margins of the parent element.

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 && parseInt(navigator.appVersion) == 4 ;
  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 (marked with a superscript ² ) 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 "IE4" column indicates whether a property is new, improved, or unchanged in Internet Explorer 4.0, as shown below:

Color	Notation	Means
Green	N	New in Internet Explorer 4.0
Light blue	I	Improved in Internet Explorer 4.0
Light gray	--	Same in Internet Explorer 3.0 and 4.0

Note: You can also view the following set of tables in a separate window.

Font Properties

These seven properties control typography in the document. (See Example 1.)

Property	Valid Values	Sample Usage	Applies to	Inherited?	IE
font-family	[ [ family-name \| generic-family ], ]* [ family-name \| generic-family ]	{ font-family: Verdana, MS Sans Serif; }	all elements	yes	--
font-style	normal \| italic	{ font-style:italic; }	all elements	yes	--
font-variant	normal \| small-caps	{ font-variant:small-caps: }	all elements	yes	I
font-weight	normal \| bold	{ font-weight:bold; }	all elements	yes	I
font-size	[ xx-large \| x-large \| large \| medium \| small \| x-small \| xx-small ] \| [ larger \| smaller ] \| percentage \| length	{ font-size:12pt; }	all elements	yes	I
font	[ font-style \|\| font-variant \|\| font-weight ] ? font-size [ / line-height ] ? font-family	{ font: bold 12pt Arial; }	all elements	yes	I
@font-face²	font-family: font-family; src:url(url)	@font-face { font-family: CoolFont; src:url(http://myserver.com/CoolFont.eot); }	all elements	yes	N

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. (See Example 2.)

Property	Valid Values	Sample Usage	Applies to	Inherited?	IE
color	color	{ color:salmon; }	all elements	yes	--
background-color	color \| transparent	{ background-color:crimson; }	all elements	no	N
background-image	url \| none	{ background-image:url(bgWood.jpg); }	all elements	no	N
background-repeat	repeat \| repeat-x \| repeat-y \| no-repeat	{ background-repeat:no-repeat; }	all elements	no	N
background-attachment	scroll \| fixed	{ background-attachment:fixed; }	all elements	no	N
background-position	[ position \| length ] \| {1,2} \| [ top \| center \| bottom ] \|\| [ left \| center \| right ]	{ background-position: top center;}	block-level and replaced elements	no	N
background	transparent \| color \|\| url \|\| repeat \|\| scroll \|\| position	{ background: silver url(bgRock.jpg) repeat-y }	all elements	no	I

Text Properties

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

Property	Valid Values	Sample Usage	Applies to	Inherited?	IE
letter-spacing	normal \| length	{ letter-spacing:2pt; }	all elements	yes	N
text-decoration	none \| underline \| overline \| line-through	{ text-decoration:underline; }	all elements	no	I
vertical-align	sub \| super \|	{ vertical-align:sub; }	inline elements	no	N
text-transform	capitalize \| uppercase \| lowercase \| none	{ text-transform:lowercase; }	all elements	yes	I
text-align	left \| right \| center \| justify	{ text-align:center; }	block-level elements	yes	I
text-indent	length \| percentage	{ text-indent:20px; }	block-level elements	yes	--
line-height	normal \| number \| length \| percentage	{ line-height:5pt; }	all elements	yes	I

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 ). (See Example 4.)

Property	Valid Values	Sample Usage	Applies to	Inherited?	IE
margin-top	length \| percentage \| auto	{ margin-top:5px; }	block-level and replaced elements	no	I
margin-right	length \| percentage \| auto	{ margin-right:5px; }	block-level and replaced elements	no	I
margin-bottom	length \| percentage \| auto	{ margin-bottom:1em; }	block-level and replaced elements	no	N
margin-left	length \| percentage \| auto	{ margin-left:5pt; }	block-level and replaced elements	no	I
margin	length \| percentage \| auto {1,4}	{ margin: 10px 5px 10px 5px; }	block-level and replaced elements	no	I
padding-top	length \| percentage	{ padding-top:10%; }	block-level and replaced elements	no	N
padding-right	length \| percentage	{ padding-right:15px; }	block-level and replaced elements	no	N
padding-bottom	length \| percentage	{ padding-bottom:1.2em; }	block-level and replaced elements	no	N
padding-left	length \| percentage	{ padding-left:10pt; }	block-level and replaced elements	no	N
padding	length \| percentage {1,4}	{ padding: 10px 10px 10px 15px; }	block-level and replaced elements	no	N
border-top-width	thin \| medium \| thick \| length	{ border-top-width:thin; }	block-level and replaced elements	no	N
border-right-width	thin \| medium \| thick \| length	{ border-right-width:medium; }	block-level and replaced elements	no	N
border-bottom-width	thin \| medium \| thick \| length	{ border-bottom-width:thick; }	block-level and replaced elements	no	N
border-left-width	thin \| medium \| thick \| length	{ border-left-width:15px; }	block-level and replaced elements	no	N
border-width	thin \| medium \| thick \| length {1,4}	{ border-width: 3px 5px 3px 5px; }	block-level and replaced elements	no	N
border-top-color	color	{ border-top-color:navajowhite; }	block-level and replaced elements	no	N
border-right-color	color	{ border-right-color:whitesmoke; }	block-level and replaced elements	no	N
border-bottom-color	color	{ border-bottom-color:black; }	block-level and replaced elements	no	N
border-left-color	color	{ border-left-color:#C0C0C0; }	block-level and replaced elements	no	N
border-color	color {1,4}	{ border-color: green red white blue; }	block-level and replaced elements	no	N
border-top-style	none \| solid \| double \| groove \| ridge \| inset \| outset	{ border-top-style:solid; }	block-level and replaced elements	no	N
border-right-style	none \| solid \| double \| groove \| ridge \| inset \| outset	{ border-right-style:double; }	block-level and replaced elements	no	N
border-bottom-style	none \| solid \| double \| groove \| ridge \| inset \| outset	{ border-bottom-style:groove; }	block-level and replaced elements	no	N
border-left-style	none \| solid \| double \| groove \| ridge \| inset \| outset	{ border-left-style:none; }	block-level and replaced elements	no	N
border-style	none \| solid \| double \| groove \| ridge \| inset \| outset	{ border-style:ridge; }	block-level and replaced elements	no	N
border-top	border-width \| border-style \| border-color	{ border-top: medium outset red; }	block-level and replaced elements	no	N
border-right	border-width \| border-style \| border-color	{ border-right: thick inset maroon; }	block-level and replaced elements	no	N
border-bottom	border-width \| border-style \| border-color	{ border-bottom: 10px ridge gray; }	block-level and replaced elements	no	N
border-left	border-width \| border-style \| border-color	{ border-left: 1px groove red; }	block-level and replaced elements	no	N
border	border-width \| border-style \| border-color	{ border: thin solid blue; }	block-level and replaced elements	no	N
float	none \| left \| right	{ float:none; }	DIV, SPAN, and replaced elements	no	N
clear	none \| left \| right \| both	{ clear:left; }	all elements	no	N

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>. (See Example 5.)

Property	Valid Values	Sample Usage	Applies to	Inherited?	IE
display	none \| block \| inline \| list-item	{ display:none; }	TABLE, INPUT, TEXTAREA, INPUT type=button, DIV, SPAN, IFRAME, IMG, BODY, MARQUEE, SELECT	no	N
list-style-type	disk \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| upper-alpha \| none	{ list-style-type:upper-alpha; }	list-item elements	yes	N
list-style-image	url \| none	{ list-style-image:url(icFile.gif); }	list-item elements	yes	N
list-style-position	inside \| outside	{ list-style-position:inside; }	list-item elements	yes	N
list-style	keyword \|\| position \|\| url	{ list-style: square outside url(icFolder.gif); }	list-item elements	yes	N

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 DHTML, HTML & CSS section of the MSDN Online Web Workshop and in the W3C documents, and is worthy of special study. (See Example 6 and Example 7.)

Property	Valid Values	Sample Usage	Applies to	Inherited?	IE
clip	shape \| auto	{ clip:rect(0px 200px 200px 0px); }	all elements	no	N
height	length \| auto	{ height:200px; }	DIV, SPAN and replaced elements	no	N
left	length \| percentage \| auto	{ left:0px; }	absolutely and relatively positioned elements	no	N
overflow	visible \| hidden \| scroll \| auto	{ overflow:scroll; }	all elements	no	N
position	absolute\| relative \| static	{ position:absolute; }	all elements	no	N
top	length \| percentage \| auto	{ top:0px; }	absolutely and relatively positioned elements	no	N
visibility	visible \| hidden \| inherit	{ visibility:visible; }	all elements	no	N
width	length \| percentage \| auto	{ width:80%; }	DIV, SPAN and replaced elements	no	N
z-index	auto \| integer	{ z-index:-1; }	absolutely and relatively positioned elements	no	N

Printing Properties

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

Property	Valid Values	Sample Usage	Applies to	Inherited?	IE
page-break-before	auto \| always \|\| left \| right	{ page-break-before:always; }	block-level elements	no	N
page-break-after	auto \| always \|\| left \| right	{ page-break-before:auto; }	block-level elements	no	N

Filter Properties

The three filter properties represent another important topic that deserves separate study. Almost all filter properties are applied using scripting. (See Example 8.)

Property	Valid Values	Sample Usage	Applies to	Inherited?	IE
Visual Filter²	filtername(fparameter1, fparameter2)	{ filter:FlipH(enable=1) }	all elements	no	N
Reveal Transition Filter²	RevealTrans(duration=duration, transition=transitionshape)	{ filter:revealTrans(duration=1.0, transition=12); }	all elements	no	N
Blend Transition Filter²	BlendTrans(duration=duration)	{ filter: blendTrans(duration = 1.5) }	all elements	no	N

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.

Property	Valid Values	Sample Usage	Applies to	Inherited?	IE
@import	url(url)	@import url(mystyles.css);	style sheets	yes	N
cursor²	auto \| crosshair \| default \| hand \| move \| e-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize \| text \| wait \| help	{ cursor:hand; }	all elements	yes	N
!important	!important	{ font-weight:bold!important }	style sheets	no	N
active, hover², link, visited	n/a	a:hover { color:red; }	all elements	yes	I

Internet Explorer 4.0 CSS Examples

The samples in this section require Internet Explorer 4.0.

Example 1: Font properties

Example 1 uses font properties to enhance the appearance of a line of text. Note that the font property allows the grouping of the "font-" properties into one declaration.

Example 2: Color and background properties

Example 2 uses color properties to add color to the text in Example 1. Note that the HTML is exactly the same as in Example 1; only the CSS style rules have changed.

Example 3: Text properties

Example 3 aligns four paragraphs differently, and modifies the text formatting to highlight the text-align value in question.

Example 4: Box properties

Example 4 uses scripted dynamic styles to show the formatting that may be applied to an element's border.

Example 5: Classification properties

Example 5 uses both types of classification properties (display and list) to control the appearance of an unordered list.

Examples 6 and 7: Positioning properties

Example 6 uses positioning to create a colorful presentation consisting overlapping text.

Example 7 combines positioning, box, and color properties to show the level of control over HTML elements. In this case, both a <TEXTAREA> and a <DIV> are formatted to look like an <IFRAME>.

Example 8: Filter properties

Example 8 shows the effect of a few simple visual filters on an image.

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, and eight examples with sample code, as well as a downloadable template sample.

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.

Three documents cover various aspects of CSS in great detail:

For a comprehensive list of all CSS properties implemented in Internet Explorer, go to the CSS Attributes Reference.
For a good introduction to CSS and a discussion of some important aspects of applying CSS in Internet Explorer 4.0, go to Managing Style Sheets.
For more on positioning, see the Positioning topic.

For information on embedding fonts in Web pages using @font-face, see the Microsoft Typography site .

For additional information and technical articles on Dynamic HTML, see the Dynamic HTML articles in the MSDN Online Web Workshop.

Some fine external sources of information on CSS exist as well. The W3C documents include:

W3C Style Sheets , which lists resources both on the W3C site and elsewhere.
The CSS1 Recommendation , the official specification and an exhaustive reference for all CSS properties.
CSS Positioning , which covers the positioning properties in great detail and with examples.
Style Sheets in HTML Documents , which is part of the HTML 4.0 specification.

Some interesting third-party sites include the following:

The Web Design Group's Guide to Cascading Style Sheets , a substantive treatment of various aspects of CSS.
The Web Designer's Guide to Style Sheets , which lists the state of implementation of CSS in various browsers on various platforms.
The Cascading Style Sheets Tutorial , which covers the fundamentals of CSS in a clear and simple manner.
Web Review's Style Sheet Reference Guide , which lists the various implementations of CSS in different browsers.