Cascading Styles Sheets of Web Pages

Cascading Styles Sheets of Web Pages

Contents

Introduction

Browser Support 

CSS Level 2

Separate No More

New in Level 2

Supported in Internet Explorer 4.0

Cascading Style Sheets 

Ways to Add Styles to Your Web Pages

Applying CSS Styles to HTML Elements 

Basic Syntax (Foreword)

1. Using Inline Styles

2. Embedding a STYLE Block

3. Linking to a Style Sheet

4. Using Imported Style Sheets

Mixing Methods

Which Method Should You Use?

Ways to Select Styles in Web Pages

1. HTML Element as Selector 

2. CLASS as Selector 

3. ID as Selector 

Contextual Selectors 

Grouped Selectors 

Choosing Selectors 

Special selectors: Links 

Comments

A Note on <DIV> and <SPAN> Elements

Cascading and Inheritance

Some Implications of CSS for HTML Design

1. Return to Basics

2. Focus on Structure

3. Rapid Application Development

4. Master Templates

5. Coping with Non-CSS Browsers or different versions

Dynamic Styles

Example1. Using more than one linked style sheet

Example 2. Functions working with an embedded style block.

Introduction

Style sheets, introduced in Microsoft Internet Explorer 3.0, are about to change the way people build and maintain their Web pages. A style sheet may not be obvious to readers of Web pages because it works behind the scenes to give Web authors and designers more control and flexibility in their word- and design-smiting on the Web.

Style sheets deliver some of the formatting features and control authors and designers have been enjoying for years in traditional desktop publishing-features that have been sorely missed on the Web. With style sheets, you can finally specify point sizes, page margins, and leading (spacing between lines). You can also create any number of formatting variations for a single HTML tag.

In addition to this new functionality, a style sheet provides a convenient service: It separates the formatting information from the actual content on your HTML pages, so it becomes much easier to design and revise your pages.

A style sheet is a template that controls the formatting of HTML tags on your Web pages. If you use Microsoft Word, you will find the concept of style sheets very similar to Word templates: You can alter the appearance of a Word document by changing the formatting assigned to styles in your document. Similarly, you can alter the appearance of a Web page by changing the formatting assigned to HTML tags through a style sheet, and thus override the browser's default specification for those tags.

If you publish on the Web, you may want to take advantage of style sheets for three main reasons:

additional formatting

better control

easier customization.

Specifically, style sheets allow you to:

Use leading, margins, indents, point sizes, and text background colors on your Web pages. Authors and designers take these formatting features for granted, but HTML does not support these directly through its standard set of tags.

Stop using awkward workarounds for basic formatting tasks (such as <BLOCKQUOTE> for margins).

Change the formatting of individual Web pages or your entire site without touching every single line in your HTML files.

Reduce the clutter of tags on your HTML pages (because you don't need to turn tags on and off to change the design of a single element).

Define design variations through classes (for example, if you need five different paragraph styles, you can specify five classes for the <P> tag, e.g., P.normal, P.indented, P.underlined, P.red, P.dblspaced).

Browser Support

Internet Explorer 3.0 was the first Web browser to support style sheets. The Internet Explorer 3.0 implementation of style sheets is based on the W3C working draft called "Cascading Style Sheets, Level 1" (dated May 1996). Spyglass and Netscape also support style sheets in newer versions (4+) of their browsers. Browsers that don't support style sheets display the pages using the browser's default specs instead.

With the final release of Internet Explorer 4.0, Microsoft is making good on its commitment to fully support W3C Recommendation (the W3C's terminology for "finalized") for Cascading Style Sheets Level 1 (in December 1996). 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 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. 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>

CSS Level 2

The World Wide Web Consortium (W3C) has released the specification for Cascading Style Sheets, level 2 (CSS2) as a W3C Recommendation in May 1998. First and foremost, the CSS2 specification contains many more examples and better descriptions of the style sheet properties. A number of descriptions that were ambiguous in the CSS1 specification have been clarified. Also, a number of feature areas that were previously only described in proposals or notes by the W3C, such as CSS Positioning, have been folded into the CSS2 specification, while several entirely new features have been added. The specification has been organized by feature to make it easier to navigate a much larger set of information.

Separate No More

The following separate proposals have been folded into CSS2:

Control over printing properties and media dependency

Precise control over font properties, including the ability to download fonts over the Web

Absolute and relative positioning of HTML elements, for precise layout control

Control over aural representation of content, for speech synthesizers and other aural presentation media

New in Level 2

Entirely new features in CSS2:

Control over table formatting, including a new "fixed" layout table for faster layout and collapsing borders for grid-like tables

Bi-directional text handling: CSS now takes into account languages with right-to-left text (such as Hebrew and Arabic), and provides specific properties for controlling text direction

Simple generated text and automatic numbering properties, primarily for accessibility purposes

Text shadowing is now pulled out as its own property

Integration with the user's operating system is provided with a set of user-interface properties; it is now possible to select the user's system fonts and colors, and control the cursor over elements of an HTML page

Supported in Internet Explorer 4.0

A number of CSS2 properties are implemented in Internet Explorer 4.0, including:

CSS positioning

downloadable fonts

page-breaking for printing

media-dependent style sheets

system fonts and colors

cursor control

Cascading Style Sheets

The W3C draft refers to "cascading style sheets" because you can use multiple styles to control the appearance of your page, and the browser follows rules (a "cascading order") to determine precedence and to resolve conflicts. For example, the Web author can use linked, embedded, and inline styles (described below) in one document, and Web readers can have their own personal style sheets. If the linked style sheet defines a heading tag as blue, the top-of-page style sheet defines it as red, and the reader wants to see purple, the browser has to decide what to display.

Ways to Add Styles to Your Web Pages

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

Applying CSS Styles to HTML Elements

You can use style sheets in four ways, depending on your design needs:

By adding inline styles to HTML file. This gives you a quick way to change the appearance of a single tag, a group of tags, or a block of information on your page.

By embedding a style sheet in HTML file. This method allows you to change the appearance of a single Web page by tweaking a few lines.

By linking to a style sheet from HTML file. This method allows you to change the appearance of multiple Web pages by tweaking a single file.

By importing a style sheet in HTML file. This method allows you also to change the appearance of multiple Web pages by tweaking a single file.

You can use one, two, or all of these methods on your pages.

Basic Syntax (Foreword)

Both linked and embedded style sheets include one or more style definitions. (The inline style syntax is somewhat different, as we'll discuss later.) A style definition consists of an HTML tag (any tag), followed by a listing of properties for that tag within curly braces. Each property is identified by the property name, followed by a colon and the property value. Multiple properties are separated by semicolons. For example, the following style definition assigns the <H1> tag a specific font size (15 points) and font weight (boldface):

H1

You can thus create style definitions for any number of HTML tags and either place them in a separate file or embed them directly within your Web pages.

1. Using Inline Styles

If you want to take advantage of point sizes, indentation, or other styles in only a few sections of your Web page, you can use inline styles. Inline style definitions affect individual occurrences of a tag. These are embedded within the tag itself using the STYLE parameter.

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>

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.

The following HTML code indents a specific <P> tag:

<P STYLE="margin-left: 0.5in; margin-right: 0.5in">

This line will be indented on the left and right.

<P>

This line will receive no indentation.

Here's the result:

If the inline style conflicts with an embedded or linked style, the inline style overrides for that particular occurrence. For example, if the line above appears on a Web page that defines <P> with 1-inch margins through a linked style sheet, all paragraphs on the Web page will get 1-inch margins except for the <P> above, which will get 0.5-inch margins.

If you want to change the appearance of an entire section, you can use the <DIV> tag to define styles globally for that section. The following example changes the color and point size of a block of text by using the <DIV> tag (this has the same effect as assigning these styles separately for the <P>, <UL>, and <LI> tags):

<DIV STYLE="font-size: 10pt; color: red">

<P>The style specification affects everything on this page until the DIV close tag.

<UL>

<LI>This is red and 10 pt.

<LI>So is this.

</UL>

</DIV>

Result:

The following example uses the <DIV> tag for a block of text, but overrides it for a specific <LI> tag:

<DIV STYLE="font-size: 10pt; color: red">

<P>The style specification affects everything on this page until the DIV close tag,

except for the second list item.

<UL>

<LI>This is red and 10 pt.

<LI STYLE="color: blue">This is blue and 10 pt.

</UL>

</DIV>

Result:

Inline styles are simple to use if you're focusing on a few tags or sections on your Web page (for example, you're highlighting a heading or indenting an abstract). However, inline styles clutter up your HTML pages, and revisions require more detailed attention (because you have to change multiple lines scattered throughout your HTML file). If you want to make global changes to one or more Web pages, you'll find that using a centralized STYLE block (either linked or embedded) is easier and more efficient.

The <SPAN> tag is very similar to the <DIV> tag, but is used for smaller page elements (for example, words, even letters) instead of text blocks or containers. You can use <SPAN> to change styles within a sentence or even within a word, or to create special effects.

2. Embedding a STYLE Block

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 allows you to change the appearance of a single Web page.

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 <STYLE> tag has one parameter, TYPE, which specifies the Internet Media type as "text/css" (allowing browsers that do not support this type to ignore style sheets). The <STYLE> tag is followed by any number of style definitions and terminated with the </STYLE> tag.

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 group of selectors, followed by an open 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>

<!--

B

P

-->

</STYLE>

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

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.

Example: The following example specifies styles for the <BODY>, <H1>, <H2>, and <P> tags.

<HTML>

<STYLE TYPE="text/css">

<!--

BODY

H1

H2

P

-->

</STYLE>

<BODY>

</BODY>

</HTML>

3. Linking to a Style Sheet

To link to an external style sheet, you simply create a file with your style definitions (as explained below for embedded styles), save it with a .CSS file extension, and link to it from your Web page, using a <LINK> tag in the <HEAD> section of the linking document. This way, you can use the same style sheet for any number of pages on your site.

For example, if your style sheet is called MYSTYLES.CSS and is located at the address https://internet-name/mystyles.css, you would add the following to your Web page, within the <HEAD> tag:

<HEAD>

<TITLE>Title of article</TITLE>

<LINK REL=STYLESHEET HREF="https://server/mystyles.css" TYPE="text/css">

</HEAD>

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.

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

Mixing Methods

If there are complicated requirements for the Web page, that can be met only by using two or all three methods, like in scenarios below.

Storing styles in separate style sheets (one storing the basic page layout for simple documents, and others customizing the layout for different types of documents), and linking to multiple .CSS files at the top of the page.

Linking to company-wide style sheet for consistency, but providing style variations (through classes) with an embedded style sheet.

Linking to company-wide style sheet, but overriding several specific elements using inline styles.

When readers' style sheets are supported, using style sheets to provide formatting that is essential to page design, and letting readers adjust the point size, leading, and typeface to suit their personal preferences.

So what will happen if you use multiple style sheets that have conflicting style information? That's where the "cascading order" will come into play. According to the W3C, the author's style sheets will override the reader's style sheet, which in turn will override the browser's default values. If the author uses all three methods listed above, the inline styles will take precedence over the embedded <STYLE> block, which will override the linked style sheet.

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.

Ways to Select Styles in Web Pages

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.

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

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

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.

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. It is a good ideea to preface a class name with "cls" to help identify it as a class name, this convention being especially useful for scripting.

Example: if you'd like to use three colors for your H1 headings (say, depending on context), you'd define three classes in your STYLE tag:

<STYLE>

H1.red

H1.green

H1.blue

</STYLE>

and use them as follows on your Web page:

<H1 CLASS=red>This is the red heading</H1>

<H1 CLASS=blue>This is the blue heading</H1>

<H1 CLASS=green>You get the picture...</H1>

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

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.

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.

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 properties, we can combine the selectors into one declaration, as follows:

H1

H2

H3

you can group them thus:

H1, H2, H3

You can also group formatting specifications. Take:

H1

and simplify it this way:

H1

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  

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>

Special selectors: Links

The style sheet implementation also allows you to customize the appearance of links (text that the user clicks to jump to another page) by assigning two predefined classes to the <A> (anchor) tag:

A:link represents a link that hasn't been visited (clicked).

A:visited represents a link that the user has already clicked.

A:active represents a link that is currently being visited (for example, if your Web page consists of two frames - a contents frame and a viewer frame - and you click a link in the contents frame, the link will be "active" while you're viewing that article).

You can set any font or text formatting properties on these anchor classes, including color, font-size, font-weight, and text-decoration. For example, to assign specific colors to the three types of links, you can specify:

A:link

A:visited

A:active

Setting text-decoration to "none" allows you to remove the underlining from the link text:

A:visited

Comments

You can add comments to your style sheet to explain your design decisions. Comments can appear on any line in the style specification, between the characters /* and */-for example:

H1 /* Green for heading 1 */

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>

<!--

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 text about to flow seamlessly into a SPAN tag <SPAN>I am a SPAN</SPAN> and make a smooth getaway.</P>

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. <SPAN> is often used to affect just a portion of text within a block-level element, such as a paragraph. 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, it is 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.

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 the paragraph with the ID idP1 below:

<STYLE>

<!--

BODY  

P  

.clsCode  

#idP1  

-->

</STYLE>

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

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:

inline styles;

ID;

CLASS;

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>

<!--

BODY  

P  

.clsCode  

#idP1  

-->

</STYLE>

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

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 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. 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 and certain properties apply only to a limited number of elements.

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. 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. Here are few of them:

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

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

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

You decide that you want 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

Refresh the document and there you go. All 42 instances of <H6> reflect the new style.

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

5. Coping with Non-CSS Browsers or different versions

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.

There are, also, some differences between versions of browsers, as Internet Explorer 3.x and 4+. 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 (for the differences IE 3.x and 4+):

<SCRIPT LANGUAGE="Javascript">

<!--

var bIsIE = navigator.appName == "Microsoft Internet Explorer" ;

var bIsIE4 = bIsIE && navigator.appVersion.indexOf("4.") > -1 ;

if (bIsIE4)

else

document.write(sCSS) ;

//-->

</SCRIPT>

Dynamic Styles

Creating dynamic styles is very easy. Once you understand CSS basics, all you need to know is a few lines of script - and you can have any HTML tag change dynamically by applying CSS attributes to it. For example, inline script events allow you to dynamically change the style attributes of any HTML element when you touch it with the mouse (onmouseover) or move the mouse off of it (onmouseout).

For example, the following headline code:

<H4 onmouseover="javascript:this.style.color='#6633FF'"

onmouseout="javascript:this.style.color='#000000'">

This headline will change to purplewhen the mouse touches it,and back to black when

the mouse moves off of it

</H4>

creates this headline:

This headline will change to purple when the mouse touches it, and back to black when the mouse moves off of it

Following, there are some examples on how it is possibile to make styles dinamic.

Example1. Using more than one linked style sheet

This sample illustrates using more than one linked style sheet on the page. As you click on the arrow, the sample cycles through 10 different linked Cascading Style Sheets, linked with master page like in the following picture:

LinkedCSS.htm:

sheet1.css

.clsLinkedCSSItem 

sheet2.css

.clsLinkedCSSItem 

sheet3.css

.clsLinkedCSSItem

sheet4.css

.clsLinkedCSSItem

sheet5.css

.clsLinkedCSSItem

sheet6.css

.clsLinkedCSSItem

sheet7.css

.clsLinkedCSSItem

sheet8.css

.clsLinkedCSSItem

sheet9.css

.clsLinkedCSSItem

sheet10.css

.clsLinkedCSSItem

Example 2. Functions working with an embedded style block

This sample illustrates how you can use JavaScript functions to call various parts of an embedded style block. This changes the design of the content without having to leave or refresh the page.