- How CSS Works
- A Basic Style Sheet
- A CSS Style Primer
- Using Style Classes
- Using Style IDs
- Internal Style Sheets and Inline Styles
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Internal Style Sheets and Inline Styles
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 chapter.
Listing 3.3 shows an example of how you might specify an internal style sheet.
Listing 3.3 A Web Page with 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.footer {
font-size: 9pt;
line-height: 12pt;
text-align: center;
}
</style>
</head>
<body>
...
<div class="footer">
Copyright 2009 Acme Products, Inc.
</div>
</body>
</html>
In the listing code, the div.footer 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 might 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.
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>
Validate Your Style Sheets
Just as it is important to validate your HTML or XHTML markup, it is important to validate your style sheet. A specific validation tool for CSS can be found at http://jigsaw.w3.org/css-validator/. Just like the validation tool discussed in Chapter 2, “Understanding HTML and XHTML Connections,” you can point the tool to a web address, upload a file, or paste content into the form field provided. The ultimate goal is a result such as that shown in Figure 3.3: valid!
)
Figure 3.3 The W3C CSS Validator shows there are no errors in the style sheet contents of Listing 3.1.
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.