Internal Style Sheets and Inline Styles | Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

In some situations, you might want to specify styles that will be used in only one web page, in which case you can enclose a style sheet between <style> and </style> tags and include it directly in an HTML document. Style sheets used in this manner must appear in the head of an HTML document. No <link /> tag is needed, and you cannot refer to that style sheet from any other page (unless you copy it into the beginning of that document too). This kind of style sheet is known as an internal style sheet, as you learned earlier in the lesson.

Listing 12.3 contains an example of how you might specify an internal style sheet.

Listing 12.3. A Minimal Web Page That Demonstrates How to Use an Internal Style Sheet

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>Some Page</title>     <style type="text/css">       div.footnote {         font-size:9pt;         line-height:12pt;         text-align:center;}     </style>   </head>   <body>   ...   <div >   Copyright 2006 Acme Products, Inc.   </div>   </body> </html>

In the listing code, the div.footnote style class is specified in an internal style sheet that appears in the head of the page. The style class is now available for use within the body of this page. And, in fact, it is used in the body of the page to style the copyright notice.

Internal style sheets are handy if you want to create a style rule that is used multiple times within a single page. However, in some instances you may need to apply a unique style to one particular element. This calls for an inline style rule, which allows you to specify a style for only a small part of a page, such as an individual element. For example, you can create and apply a style rule within a <p>, <div>, or <span> tag via the style attribute. This type of style is known as an inline style because it is specified right there in the middle of the HTML code.

By the Way

<span> and </span> are dummy tags that do nothing in and of themselves except specify a range of content to apply any style attributes that you add. The only difference between <div> and <span> is that <div> is a block element and therefore forces a line break, whereas <span> doesn't. Therefore, you should use <span> to modify the style of any portion of text that is to appear in the middle of a sentence or paragraph without any line break.

Here's how a sample style attribute might look:

 <p style="color:green">   This text is green, but <span style="color:red">this text is red.</span>   Back to green again, but... </p> <p>   ...now the green is over, and we're back to the default color for this page. </p>

This code makes use of the <span> tag to show how to apply the color style property in an inline style rule. In fact, both the <p> tag and the <span> tag in this example use the color property as an inline style. What's important to understand is that the color:red style property overrides the color:green style property for the text appearing between the <span> and </span> tags. Then in the second paragraph, neither of the color styles applies because it is a completely new paragraph that adheres to the default color of the entire page.

By the Way

To give the pages at the Sams Publishing website a consistent look and feel, I created a style sheet that is linked to every page in the site. For your edification and convenience, I copied that style sheet text into an HTML page, which you can access from the same zip file.