Gluing Style Sheets to the Document | Cascading Style Sheets: Designing for the Web (3rd Edition)

"Gluing" Style Sheets to the Document

For any style sheet to affect the HTML document, it must be "glued" to the document. That is, the style sheet and the document must be combined so that they can work together to present the document. This can be done in any of four ways:

Apply the basic, document-wide style sheet for the document by using the STYLE element.
Apply a style sheet to an individual element using the STYLE attribute.
Link an external style sheet to the document using the LINK element.
Import a style sheet using the CSS @import notation.

In the next section, we discuss the first method: using the STYLE element. We discuss using the STYLE attribute in Chapter 4 and using the LINK element and the @import notation in Chapter 14.

Gluing by Using the STYLE Element

You can glue together the style sheet and the HTML document by putting the style sheet inside a STYLE element at the top of your document. The STYLE element was introduced in HTML specifically to allow style sheets to be inserted inside HTML documents. Here's a style sheet (shown in bold) glued to a sample document by using the STYLE element. The result is shown in Figure 2.5.

Figure 2.5. The result of gluing the style sheet to the document is that H1 and H2 elements are shown in italics. The style sheet is inserted into the STYLE element.

 <HTML>   <TITLE> Bach's home page</TITLE>   <STYLE>     H1, H2 { font-style: italic }   </STYLE>   <BODY>     <H1>Bach's home page</H1>     <P>Johann Sebastian Bach was a prolific         composer. Among his works are:     <UL>       <LI>the Goldberg Variations       <LI>the Brandenburg Concertos       <LI>the Christmas Oratorio     </UL>     <H2>Historical perspective</H2>     <P>Bach composed in what has been referred       to as the Baroque period.   </BODY> </HTML>

Notice that the STYLE element is placed after the TITLE element and before the BODY element. The title of a document does not appear on the canvas, so CSS styles do not affect it.

The content of a STYLE element is a style sheet. However, whereas the content of such elements as H1, P, and UL appears on the canvas, the content of a STYLE element does not show up on the canvas. Rather, it is the effect of the content of the STYLE element the style sheet that appears on the canvas. So, you don't see h1, H2 { font-style: italic } displayed onscreen; instead, you see two slanted elements. No rules have been added that affect any of the other elements, so those elements appear in the browser's default style.