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

CSS Comments

/* These are my styles! Yay! */

CSS also allows for comments, but it uses a completely different syntax to accomplish this. CSS comments are very similar to C/C++ comments, in that they are surrounded by /* and */:

/* This is a CSS1 comment */

Comments can span multiple lines, just as in C++:

/* This is a CSS1 comment, and it
can be several lines long without
any problem whatsoever. */

It's important to remember that CSS comments cannot be nested. So, for example, this would not be correct:

/* This is a comment, in which we find
another comment, which is WRONG
   /* Another comment */
and back to the first comment */

However, it's hardly ever desirable to nest comments, so this limitation is no big deal.

If you wish to place comments on the same line as markup, then you need to be careful about how you place them. For example, this is the correct way to do it:

H1 {color: gray;}   /* This CSS comment is several lines */
H2 {color: silver;} /* long, but since it is alongside */
P {color: white;}   /* actual styles, each line needs to */
PRE {color: gray;} /* be wrapped in comment markers. */

Given this example, if each line isn't marked off, then most of the style sheet will become part of the comment, and so will not work:

H1 {color: gray;}   /* This CSS comment is several lines
H2 {color: silver;}   long, but since it is not wrapped
P {color: white;}   in comment markers, the last three
PRE {color: gray;}   styles are part of the comment. */

In this example, only the first rule (H1 {color: gray;}) will be applied to the document. The rest of the rules, as part of the comment, are ignored by the browser's rendering engine.

Moving on with our example, we see some more CSS information actually found inside an HTML tag!

Inline Styles

<P STYLE="color: gray;">The most wonderful of all breakfast foods is the waffle-- a ridged and cratered slab of home-cooked, fluffy goodness... </P>

For cases where you want to simply assign a few styles to one individual element, without the need for embedded or external style sheets, you'll employ the HTML attribute STYLE to set an inline style. The STYLE attribute is new to HTML, and it can be associated with any HTML tag whatsoever, except for those tags which are found outside of BODY (HEAD or TITLE, for instance).

The syntax of a STYLE attribute is fairly ordinary. In fact, it looks very much like the declarations found in the STYLE container, except here the curly brackets are replaced by double quotation marks. So <P STYLE="color: maroon; background: yellow;"> will set the text color to be maroon and the background to be yellow for that paragraph only. No other part of the document will be affected by this declaration.

Summary

In order to facilitate a return to structural HTML, something was needed to permit authors to specify how a document should be displayed. CSS fills that need very nicely, and far better than the various presentational HTML elements ever did (or probably could have done). For the first time in years, there is hope that web pages can become more structural, not less, and at the same time the promise that they can have a more sophisticated look than ever before.

In order to ensure that this transition goes as smoothly as possible, HTML introduces a number of ways to link HTML and CSS together while still keeping them distinct. This allows authors to simplify document appearance management and maximize their effectiveness, thereby making their jobs a little easier. The further benefits of improving accessibility and positioning documents for a switch to an XML world make CSS a compelling technology.

As for user agent support, the LINK element has been universally supported, as have both the STYLE element and attribute. @import didn't fare so well, though, being ignored outright by Navigator 4. This is not such a major tragedy, annoying though it might be, since the LINK element will still let you bring external style sheets into play.

In order to fully understand how CSS can do all of this, authors need a firm grasp of how CSS handles document structure, how one writes rules that behave as expected, and most of all, what the "Cascading" part of the name really means.

Return to JavaScript DevCenter.