George Young
Microsoft Corporation

September 30, 1997 for Internet Explorer 4.0 final release
(see Changes section below)

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.

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

. Revisited some of the Internet Explorer 4.0 CSS examples.

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

For example, the developer can apply the "cursor" attribute 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:

<!--HtmlStart-->

<SPAN STYLE="cursor:hand;">Give this span a hand.</SPAN>

<!--HtmlEnd-->

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.

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 attributes specifically geared towards page formatting and layout. These attributes 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.

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

and you're done. Imagine the possibilities.

You can add CSS attributes 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="attribute:value; attribute:value; .."></tag>

For example:

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

Result:

<!--HtmlStart-->

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

<!--HtmlEnd-->

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 626j94g , because the CSS attributes 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), usually 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 attributes to be applied to that selector

The generic syntax for a style rule is as follows:

selector

Case, or capitalization, is not important in CSS, but syntax is critical: Each style rule must start with a selector or comma-delimited group of selectors, followed by an open brace (). As with script blocks, it is a good idea to contain style rules within comment tags, to hide them from browsers that do not support CSS. For example:

<STYLE>

<!--

B

P

-->

</STYLE>

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

Result:

<!--HtmlStart-->

<P STYLE="border:silver thick solid; background-color:turquoise; padding:10px; text-align:center;">Not every paragraph has a silver lining with a <B STYLE="text-transform:uppercase;">bold</B> outlook.</P>

<!--HtmlEnd-->

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" attribute 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 the <LINK> tag as follows:

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

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></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 attribute 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 top of the "inheritance stack" (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 attribute is set, the most local declaration takes precedence. More on this idea of precedence in a bit.

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>

<!--

A

-->

</STYLE>

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

Result:

<!--HtmlStart-->

This is <A STYLE="text-decoration:none;" HREF="javascript:alert('I am a non-underlined link.')">a link</A> and this in <A STYLE="text-decoration:none;" HREF="javascript:alert('.and I am another.')">another.</A>

<!--HtmlEnd-->

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

-->

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

<!--HtmlStart-->

<B STYLE="color:red;">Classy, red, and bold.</B> <BR>

<I STYLE="color:red;">Red italic.</I> <BR>

<B>Just bold</B> and <I>just italic.</I>

<!--HtmlEnd-->

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

.clsCode

-->

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

<!--

#idPinkP

#idBoldItal

-->

</STYLE>

<P ID="idPinkP">

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

Result:

<!--HtmlStart-->

<P STYLE="color:pink">...je vois la vie en <SPAN STYLE="font-weight:bold; font-style:italic;">rose</SPAN>...</P>

<!--HtmlEnd-->

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 Internet Client SDK (Authoring for the Desktop & Web; Dynamic HTML; HTML Elements) 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 to scripters: If you are scripting styles, there is an advantage to using inline styles: An inline style attribute 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

-->

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

<!-

H4 I

-->

</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 attribute, and your own personal preferences. All three methods may coexist harmoniously, as in the following example:

<STYLE>

<!--

BODY

P

.clsCode

#idPara1

#idPara2

-->

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

<!--HtmlStart-->

<DIV STYLE="background:ivory;">

&nbsp;

<P STYLE="padding:10px; text-align:right; letter-spacing:2pt;">

Some spacey, right-aligned text.

</P>

<P STYLE="padding:10px; text-align:left; font-family:Courier; font-size:10pt; ">

Some left-aligned, code-ish looking text.

</P>

&nbsp;

</DIV>

<!--HtmlEnd-->

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

Again like CLASS and ID, and unlike other HTML elements, <DIV> and <SPAN> have no inherent display characteristics, with one exception: <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>

<!--

DIV

SPAN

-->

</STYLE>

<P>Some text about to run into a big DIV tag <DIV>I am a DIV</DIV> and narrowly escape.</P>

<P>Some test about to flow seamlessly into a SPAN tag <SPAN>I am a span</SPAN> and make a smooth getaway.</P>

Result:

<!--HtmlStart-->

<P>Some text about to run into a big DIV tag <DIV STYLE="background-color:black; color:red; font-weight:bold;">I am a DIV</DIV> and narrowly escape.</P>

<P>

Some text about to flow seamlessly into a SPAN tag <SPAN STYLE="background-color:royalblue; color:white;">I am a span</SPAN> and make a smooth getaway.</P>

<!--HtmlEnd-->

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 the CSS Reference Table later in this document). <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 attribute.)

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!

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>

<!--

BODY

P

.clsCode

#idP1

-->

</STYLE>

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

Result:

<!--HtmlStart-->

<DIV STYLE="background-color:salmon;">

&nbsp;

<P STYLE="margin-left:20px; font-family:'Comic Sans MS'; font-size:10pt; color:navy; text-align:left; font-weight:bold;">

Multiple styles, no conflicts.

</P>

&nbsp;

</DIV>

<!--HtmlEnd-->

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.

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, the bottom-most style declaration wins. 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 is the bottom-most declaration in the style block, its color (white) will "win out" over the previously set color (navy).

<STYLE>

<!--

BODY

P

.clsCode

#idP1

-->

</STYLE>

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

Result:

<!--HtmlStart-->

<DIV STYLE="background-color:salmon;">

&nbsp;

<P STYLE="margin-left:20px; font-family:'Comic Sans MS'; font-size:10pt; text-align:left; font-weight:bold; color:white;">

Multiple styles, one conflict.

</P>

&nbsp;

</DIV>

<!--HtmlEnd-->

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 attributes 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 attribute. Had we applied a "padding" style to BODY, this style would not have been inherited by idP1, because the "padding" attribute does not inherit.

You may note in the CSS Reference Table below that background attributes 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 attribute 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 attributes from their predecessors (in the cascade) and pass them on unaltered unless the encountered style declaration sets a declaration value for the same CSS attribute, as in the example above. (See the CSS Reference Table below for a quick overview of which attributes 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.

Cascading applies to linked, embedded, and inline styles much as it does to rules within an embedded sheet. Local styles take precedence over global ones. So, an inline style takes precedence over an embedded style, which in turn takes precedence over a style in a linked sheet.

In summary, cascading establishes the order in which multiple style assignments are evaluated for a given element, and inheritance specifies which style attributes 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 attributes apply only to a limited number of elements. For more information on cascading and inheritance, please see the the relevant sections in both the Internet Client SDK and on the W3C site (visit the links in the "More Information" section).

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

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 &lt;H6&gt; subheadings to be violet in color and lowercase? No problem; change the single style rule's color value and replace the font-variant attribute with a text-transform attribute as follows:

H6

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

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 attributes (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.0") > -1

if (bIsIE4)

else

}

document.write(sCSS)

//-->

</SCRIPT>

The table below provides a comprehensive list of all CSS attributes supported by Internet Explorer 4.0. For each attribute, I've specified the attribute 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 attribute. The "Inherited" column indicates whether the attribute is inherited by subsequent elements in the document. Finally, the "IE4" column indicates whether an attribute is new, improved, or unchanged in Internet Explorer 4.0, as shown below:

Font Properties

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

Color and Background Properties

These seven attributes control the color of the text and the background, as well as the placement and attributes of an optional background image. (See Example 2.)

Text Properties

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

Box Properties

32 box attributes control the formatting of the "box" associated with "block" and "replaceable" elements (as discussed in detail in the W3C CSS1 Recommendation). (See Example 4.)

Classification Properties

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

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

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 attributes represent another important topic that deserves separate study. Almost all filter attributes are applied using scripting. (See Example 8.)

Pseudo-Classes and Other Properties

This catch-all category includes three properties: the @import attribute, used to import an external style sheet into an existing style sheet (as explained in "Using Imported Style Sheets"); the cursor attribute, which controls the appearance of the mouse pointer as it passes over the element (as shown in the "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.

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 attribute allows the grouping of the "font-" attributes into one declaration.

Example 2: Color and background properties

Example 2 uses color attributes 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 attributes (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 attributes 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.

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 on CSS, both in general and as implemented in Internet Explorer 4.0, please refer to the following documents.

Three documents in the Internet Client SDK cover various aspects of CSS in great detail:

. For a comprehensive list of all CSS attributes implemented in Internet Explorer 4.0, go to Authoring for the Desktop & Web; Dynamic HTML; 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 Authoring for the Desktop & Web; Dynamic HTML; Dynamic Styles; Using Styles and Style Sheets).

. For more on positioning, go to Authoring for the Desktop & Web; Dynamic HTML; Positioning.

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

For additional information and technical articles on Dynamic HTML, see the Dynamic HTML section (https://www.microsoft.com/workshop/author/dhtml/) of the Site Builder Workshop.

Some fine external sources of information on CSS exist as well. The W3C hosts a slew of documents, including:

. W3C Style Sheets (https://www.w3.org/Style/css), which lists resources both on the W3C site and elsewhere.

. The CSS1 Recommendation (https://www.w3.org/pub/WWW/TR/REC-CSS1), the official specification and an exhaustive reference for all CSS attributes.

. CSS Positioning (https://www.w3.org/TR/WD-positioning), which covers the positioning properties in great detail and with examples.

. Style Sheets in HTML Documents (https://www.w3.org/TR/WD-html40-970708/present/styles.html), 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 (https://www.htmlhelp.com/reference/css/), a substantive treatment of various aspects of CSS.

. The Web Designer's Guide to Style Sheets (https://www.mcp.com/hayden/internet/style/table.html), which lists the state of implementation of CSS in various browsers on various platforms.

. The Cascading Style Sheets Tutorial (https://webreview.com/97/05/30/feature/tutorial.html), which covers the fundamentals of CSS in a clear and simple manner.

Web Review's Style Sheet Reference Guide (https://www.webreview.com/guides/style/mastergrid.html), which lists the various implementations of CSS in different browsers..