Definition: Cascading style sheets (CSS) is a simple mechanism for adding style to HTML documents. CSS makes it easy to specify the size, color, and spacing of text.

---

A set of cascading style sheet definitions can live in an external file, typically with a .CSS extension. Doing this lets you standardize and easily update the appearance of an entire application or web site. To reference an external CSS file, include a link like this in your HEAD section: Note: I use square brackets around all tags in the examples that follow. In real life, use angle brackets.)

[LINK REL="STYLESHEET" MEDIA="SCREEN" TYPE="text/css" HREF="foxwiki.css"]

You can include more than one such tag. The rules cascade (duh). Where exact specification conflicts occur in two external files, the rule in the last CSS apply.
You can specify document-specific style rules explicitly in the HEAD section of your document. Example:

[STYLE]
[!--
H3 { font-family: cursive; font-size: large; }
P { font-family: "verdana, sans-serif"; font-size: small; }
--]
[/STYLE]

And, of course, you can specify an in-line style to apply only to a single element. Example:

Let's [FONT STYLE='font-style: italic;']emphasize[/FONT] this.

As you might have guessed, a rule in a STYLE definition within the document takes precedence over an identical rule in an external file. Similarly, an in-line definition takes precedence over either.
You can define styles that apply to "classes" of HTML elements. This is perhaps the most powerful and compelling use of CSS. To differentiate a style for a class from a style for a TAG, you use a period before the class name. Thus

.caution { color: red; background-color: gray; text-align: center; }

would define the styles to be applied to any element of class "caution". Then, in your document, paragraphs representing cautions, just need [P class="caution"] to have the style applied. You can see how this makes global style revisions a snap.

---

If a CSS file that you specify with a LINK tag does not exist, MSIE will still show you the web page (thus the designer may have no clue of the error), while Netscape will refuse to show the page at all. Take your pick as to which behavior is worse.

---

Here's a URL for web fonts: http://webreview.com/wr/pub/Web_Fonts (Broken link)

---

See also: Cascading Style Sheet Links, Cascading Style Sheet Browser Notes. And see Wiki Cascading Style Sheet for everything having to do with style sheets for this Wiki.

---

CSS Books:
"Cascading Style Sheets (CSS) by Example", by Steve Callihan, ISBN 0789726173

---

Some useful CSS Compatibility resources

http://devedge.netscape.com/library/xref/2003/css-support/
http://www.htmlhelp.com/tools/csscheck/
http://www.htmlhelp.com/reference/css/
http://www.westciv.com.au/style_master/academy/browser_support/navigator_support/index.html

Not css, but interesting
http://hotwired.lycos.com/webmonkey/reference/browser_chart/index.html

---

Contributors: Randy Pearson

---

Category Web Development