| home / programming / css_utopia / chap1 / 1 |    [previous] [next] |
|
|
|
Finally, you can define CSS styles in any of three places, in conjunction with a Web page.
First, you can define a style entirely within an appropriate HTML tag. This type of style is referred to as an inline style because it is defined in line with the document's HTML code. You can assign a style attribute to almost all HTML elements. For example, to make a second-level heading in a document appear in red text and all capital letters, you could code a line like this:
<h2 style="color: red; text-transform: uppercase;">An Unusual Heading</h2>
If you follow the advice in this book, you won’t use many inline styles. As you’ll learn, separating content from presentation is one of the big advantages of CSS, and embedding styles directly in HTML tags defeats that purpose. Inline styles are mainly useful for rapid prototyping—quickly applying style properties to a particular element to experiment with an effect before giving the properties a more permanent place in an embedded or external style rule.
Specifying style properties in an embedded style is probably the method that’s most common today, particularly among beginning Web designers or those just learning the techniques involved in CSS design. It’s not my favorite, but it does have the singular virtue of being easy to deal with, so you’ll see it used from time to time in this book.
To embed a style sheet in a Web page, you place a style block in the head of the document’s HTML, as shown here in bold:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Style Sheet Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
h1, h2 {
color: green;
}
h3 {
color: blue;
}
-->
</style>
</head>
...
The CSS rules contained in the style block apply to all the designated parts of the current document. In this case, the first rule directs the browser to display all level 1 and 2 headings (h1, h2) in green. The second rule displays all level 3 headings (h3) in blue.
Notice the HTML comment delimiters (<!-- -->) just inside the <style> tags. These prevent ancient browsers that do not support CSS from interpreting the style rules as document content and displaying them in the browser window. All CSS capable browsers will ignore the comment delimiters. Even though it’s probably safe (or nearly so) to omit these symbols today, as so few ancient browsers are still in use, it does no harm to include them. I recommend you do so, just because it’s good form.
The second thing to notice about the style element’s syntax is that each rule starts on a new line, and each property specified within the rule appears indented within braces on its own line. This is not, strictly speaking, required, but it’s a good rule of thumb that improves the readability of your code, especially if you’re used to the look of JavaScript code.
| home / programming / css_utopia / chap1 / 1 | [previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: June 10, 2003
URL: http://webreference.com/programming/css_utopia/chap1/1
