Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






Cascading Style Sheets: HTML and CSS
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9

The STYLE Element

The STYLE element, which is a relatively new element in HTML, is the most common way to define a style sheet, since it appears in the document itself. STYLE should always use the attribute TYPE; in the case of a CSS1 document, the correct value is text/css, just as it was with the LINK tag. So, the STYLE container should always start with <STYLE TYPE="text/css">. This is followed by one or more styles and finished with a closing </STYLE> tag.

The styles between the opening and closing STYLE tags are referred to as the document style sheet or the embedded style sheet, since this style sheet is embedded within the document. It contains styles that apply to the document, but it can also contain multiple links to external style sheets using the @import directive.

The @import Directive

Now for the stuff that is found inside the STYLE tag. First, we have something very similar to LINK: the @import directive. Just like LINK, @import can be used to direct the web browser to load an external style sheet and use its styles in the rendering of the HTML document. The only real difference is in the actual syntax of the command and its placement. As you can see, @import is found inside the STYLE container. It must be placed there, before the other CSS rules, or else it won't work at all.

<STYLE TYPE="text/css">
@import url(styles.css); /* @import comes first */
H1 {color: gray;}
</STYLE>

Like LINK, there can be more than one @import statement in a document. Unlike LINK, however, the style sheets of every @import directive will always be loaded and used. So given the following, all three external style sheets will be loaded, and all of their style rules will be used in the display of this document:

@import url(sheet2.css);
@import url(blueworld.css);
@import url(zany.css);

WARNING:
Only Internet Explorer 4.x/5.x and Opera 3.x support @import; Navigator 4.x ignores this method of applying styles to a document. This can actually be used to one's advantage in "hiding" styles from these browsers. See Chapter 11, CSS in Action, for more details.

Actual Styles

H1 {color: maroon;}
BODY {background: yellow;}

After the @import statement in our example, we find some ordinary styles. What they mean doesn't actually matter for this discussion, although you can probably guess that they set H1 elements to be maroon and BODY elements to have a yellow background.

Styles such as these comprise the bulk of any embedded style sheet--style rules both simple and complex, short and long. It will be only rarely that you have a document where the STYLE element does not contain any rules.

For those of you concerned about making your documents accessible to older browsers, there is an important warning to be made. You're probably aware that browsers ignore tags they don't recognize; for example, if a web page contains a BLOOPER tag, browsers will completely ignore the tag because it isn't a tag they recognize.

The same will be true with style sheets. If a browser does not recognize <STYLE> and </STYLE>, it will ignore them altogether. However, the declarations within those tags will not be ignored, because they will appear to be ordinary text so far as the browser is concerned. So your style declarations will appear at the top of your page! (Of course, the browser should ignore the text because it isn't part of the BODY element, but this is never the case.) This problem is illustrated in Figure 1-5.


Figure 1-5. Older browsers will literally display your style sheets

In order to combat this problem, it is recommended that you enclose your declarations in a comment tag. In the example given here, the beginning of the comment tag appears right after the opening STYLE tag, and the end of the comment appears right before the closing STYLE tag:

<STYLE type="text/css"><!--
@import url(sheet2.css);
H1 {color: maroon;}
BODY {background: yellow;}
--></STYLE>

This should cause older browsers to completely ignore not only the STYLE tags but the declarations as well, because HTML comments are not displayed. Meanwhile, those browsers that understand CSS will still be able to read the style sheet.

WARNING:
There is one drawback to this strategy. A few versions of older browsers, such as very early versions of Netscape Navigator and NCSA Mosaic, had some trouble with comments. The problems ranged from mangled display to browser crashes. This happened with only a very few browser versions, and it's safe to say that very few of these browsers are still being operated. Be aware that there are some people out there using these particular browsers, and they may well have major problems viewing your page if you use these comment tags.

Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9

Next Pagearrow