Writing CSS

There are two ways to add CSS to your Web page: write up a style sheet or put CSS code into the style attribute of the tag that you want to format.

Writing a Style Sheet

A style sheet is a block of CSS code. It appears between style tags in an HTML document, or it exists as a separate file that you import into the HTML document. A style sheet consists of one or more style rules, or presentation instructions for the browser. A style rule, in turn, consists of a style selector, which is the element that you are formatting; and a style definition, which gives attribute/value pairs that tell the browser how to display the selector.

A style sheet looks something like this:

 <style type="text/css">   h1 {     font-family: Arial;     font-weight: bold;     font-size: 24px;   }   p {     font-family: "Times New Roman";     font-size: 16px;   } </style> 

This style sheet contains two style rules: one for the h1 selector and one for the p selector. Remember, the selectors are the elements that you are styling. In this case, you're styling the h1 and p tags for first-level headers and paragraphs, respectively. The code between the angle brackets ({ , } ) following each selector is the definition for that selector.

A style definition consists of attribute/value pairs. In HTML, attribute/value pairs take this form:

 attributename="value" 

where the attribute name is all one word, you separate the attribute from the value with an equals sign (=), and the value appears inside quotes. But in CSS, the coding convention is different:

 attribute-name: value; 

TIP

When the name of a font consists of multiple words, like Times New Roman, put the font name in quotes in your style definition. When the name of the font is a single word, like Arial, you don't need quotes.

where you separate the parts of the attribute name with the hyphen character (-) instead of mashing the whole thing together; you use the colon character (:) to separate the attribute from the value, not the equals sign; and you put the semicolon character (;) at the end of the line. Typically, you don't need to enclose the value between quotes, although there are some good exceptions to this rule, such as when the name of a font contains more than one word, like Times New Roman in the previous example.

Don't let this coding style stop you. Just by bluffing through the definition, you can guess that first-level headers display in Arial bold at a size of 24 pixels, while paragraphs use Times New Roman 16 pixels. The result of these styles looks something like Figure 42.1 in a browser.

Figure 42.1. This HTML document contains a style sheet that defines styles for the h1 and p tags.

When you change the style sheet, like this:

 <style type="text/css">   h1 {     font-family: "Times New Roman";     font-weight: bold;     font-size: 96px;   }   p {     font-family: Verdana;     font-size: 8px;   } </style> 

the presentation of your Web page changes, as in Figure 42.2.

Figure 42.2. Change the style definition, and the appearance of the Web page changes.

Style definitions can be as complex or as simple as you need them to be. In other words, you don't have to supply values for every conceivable attribute in your definition. In the previous examples, the definitions say nothing about the spacing or the color of the text, which are certainly definable in CSS. When you omit information from your definition, the browser fills in its default preferences. Therefore, unless you specifically mention that a paragraph should appear in red type, the browser just assumes you want black type, the default color. Likewise, if you hadn't specifically told the browser to use Verdana or Arial in the previous examples, the browser would have just substituted its default font.

Now, what makes CSS cascading is that child elements inherit the styles of their parents, kind of like human kids wind up with the genes of their parents. A parent element is an HTML tag that contains another HTML tag. The child element is the HTML tag that the parent element contains. Take this block of HTML code:

 <p>   Welcome back, my friends, to the <em>Show That Never Ends</em>! </p> 

The paragraph tag is the parent, and the emphasis tag is the child, since the emphasis tag sits inside the opening and closing paragraph tags. But in this case:

 <body>   <p>     Welcome back, my friends, to the <em>Show That Never Ends</em>!   </p> </body> 

the emphasis tag is still the child of the paragraph tag, but both the paragraph tag and the emphasis tag are the children of the body tag.

Cascading works like this: The child inherits the style of the parent. So any style that you give to the body tag:

 <style type="text/css">  body {   font-family: Arial;  } </style> 

automatically applies to all its children, which, in this example, are the paragraph tag and the emphasis tag, as Figure 42.3 shows. Even though the browser's default font is Times New Roman, you don't have to tell the browser to use Arial for paragraphs or emphasis tags, since these tags automatically inherit the Arial font from their body-tag parent.

Figure 42.3. In Cascading Style Sheets, the child element inherits the style of its parents. You don't have to tell the browser to display paragraphs in Arial if the body tag already has Arial in its style definition.

The cascading nature of CSS means that the style definitions of child elements refine or clarify the styles of the parents. In this style sheet:

 <style type="text/css">  body {   font-family: Arial;  }  p {   font-style: italic;  } </style> 

TIP

A few CSS attributes don't propagate from parent to child, but that's OK, because you wouldn't want the children to inherit these properties anyway. Take the margin-top attribute, which defines the size of the top margin of the page. This attribute typically goes in the body tag. You don't want all the paragraphs, headers, images, and other children of the body tag to have the exact same top margin, or all the content of your page would crowd together at the top of the browser window.

paragraphs appear in Arial italic, while other body elementssuch as h1 tagsdisplay in normal Arial. First-level headers are children of the body tag, just like paragraphs, and all children of the body tag display in Arial. But in this style sheet, only the paragraph children have the extra clarification of displaying in italic, so the browser applies this extra bit of styling to p tags and leaves all the other child tags alone. Figure 42.4 shows the results.

Figure 42.4. Use additional style definitions to clarify and expand upon the styles that children elements inherit from their parents.

TIP

When a child style definition contradicts the style definition of a parent, the browser goes with the child style. For example, if a parent definition calls for Verdana but a child definition calls for Arial, the browser uses Arial in the child's presentation. At least the browser is supposed to do this. Browsers don't always handle inheritance correctly, so be sure to check the effects of your style sheets in a variety of browsers.

Embedding Style Sheets

To embed a style sheet in your HTML page, put the CSS code between style tags, and put the entire style block inside the head section of the page, like this:

 <html>   <head>     <title>My HTML Page</title>     <style type="text/css">       body {         font-family: Arial;       }       p {         font-style: italic;       }     </style>   </head>   <body>     <!-- The body of the page goes here. -->   </body> </html> 

All the elements on your page reference an embedded style sheet, but elements of other pages do not, unless you paste the style sheet onto the other pages of your site.

TIP

To hide your CSS code from older browsers that do not support Cascading Style Sheets, you can put comment tags (<!--, -->) around the block of CSS. Put the opening comment tag immediately after the opening style tag, and put the closing comment tag immediately before the closing style tag.

Importing Style Sheets

As a way to work around the problem of including the exact same style sheet on every page of your site, you may decide to put the style sheet in a separate file, save this file with the .css extension, and then import this style sheet into every page that needs it. This way, you only have to write the style sheet once, and you don't have to go through the copying and pasting rigmarole. Better still, if you decide you need to change a style, you only have to change it once, in the CSS file. If you embed your style sheet instead, you have to update the style on every single page of your site.

To import an external CSS file, use the @import rule in place of your embedded style sheet:

 <html>   <head>     <title>My HTML Page</title>     <style type="text/css">       @import url("styles/mystyles.css");     </style>   </head>   <body>     <!-- The body of the page goes here. -->   </body> </html> 

Following the @import rule, supply the Web address of your CSS style sheet using the url("path") construction. The path can be document-relative, root-relative, or absolute, just like the path of a link.

You may import more than one style sheet:

 <style type="text/css">   @import url("styles/styles01.css");   @import url("styles/styles02.css");   @import url("styles/styles03.css"); </style> 

And, for good measure, if you want to supplement your imported style sheets with additional, page-only styles, by all means, please do so:

 <style type="text/css">   @import url("styles/styles01.css");   @import url("styles/styles02.css");   @import url("styles/styles03.css");   p {     color: #FF0000;   } </style> 

If one of the imported style sheets also contains a paragraph style and you want the browser to use your page-specific paragraph style instead, mark up the page-specific style like so:

 <style type="text/css">   @import url("styles/styles01.css");   @import url("styles/styles02.css");   @import url("styles/styles03.css");   p {     color: #FF0000;     !important;   } </style> 

The !important declaration tells the browser to use this style in the event of a conflict. It ignores any paragraph styles in the imported style sheets on this page only.

TIP

Older browsers don't understand the @import style rule, but you can use this to your advantage. Embed basic style definitions in the HTML of the page, and then use @import to bring in more advanced styles, like the kind that don't work as well in older browsers. Just don't mark the basic, embedded styles with !importantotherwise, the bland styles will override the souped-up @import versions.

Using the HTML Style Attribute

Writing a style sheet makes sense when you have a global style that applies to all the elements of a particular type. But when you have a one-off style that applies to a particular instance of an element on your page and never again, it makes more sense to put the definition in the style attribute of the element's tag.

Say you want a particular paragraph to display in bold, red type when all the other paragraphs use the browser's default appearance. You don't want to write up a style sheet for the paragraph tag, since that will change all paragraphs to bold and red. You solve the problem like this:

[View full width]
 <p>This is a normal paragraph, neither bold nor red.</p> <p>This is another normal paragraph, neither bold nor red.</p> <p style="font-weight: bold; color: #FF0000;">This is a special paragraph, both bold and  red.</p> <p>Back to normal paragraph style here, neither bold nor red.</p> 

The style attribute of the paragraph tag applies an instant CSS definition to that particular paragraph, as well as any children of the paragraph, but the presentation reverts to normal as soon as the browser encounters the closing paragraph tag, as Figure 42.5 shows.

Figure 42.5. Put a CSS definition inside the style attribute of an HTML tag to create a one-off style for that tag.

TIP

Notice that the definition inside the style attribute follows CSS conventions, even though the surrounding code uses HTML conventions.