Embedding Style Sheets

If you want to develop style sheet-enhanced pages that work in both Internet Explorer and Navigator, you should use the CSS syntax. In the next few sections, all of examples I present are going to use the CSS syntax, since it works in both browsers. Later, I’ll discuss the Navigator-specific JavaScript syntax for style sheets.

Style sheets can be added directly to a document or imported from one or more external files. In-document and external style sheets coexist well in the same document; you can have as many of each type as your page design requires.

In-Document Styles

There are two ways to embed CSS information directly in an HTML document: using the <STYLE> tag pair or using STYLE attributes of HTML tags. For ease of maintenance and consistency throughout a document, I recommend using a <STYLE> tag inside the HEAD section of the document. But you can also include STYLE attributes directly inside the tag for almost any HTML element.

The <STYLE> tag

It is convenient to define style sheet rules between <STYLE> and </STYLE> tags. The collection of rules within these tags is the classic instance of a CSS style sheet. Because the elements to which you bind style declarations can appear early in the body of the document (and may be bound to the BODY element itself), you should use the <STYLE> tag in the HEAD section of your document. This guarantees that the style sheet is loaded and in effect before any elements of the document are rendered. Include the ...

Get Dynamic HTML: The Definitive Reference now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.