Levels of CSS

So far all your CSS code has occurred in the head area of a local page. That's a great place to put CSS, but it's not the only place. You can actually incorporate CSS code in three different levels:

local

You can describe a style directly in the HTML with a special HTML attribute. This is very immediate, and overrides most other style directives, but defeats the purpose of separating style from content.

page-level

This is done using the style tag in the HTML header. This is the technique you've been using. It is powerful, but only affects the current page.

external

An external style is defined in a separate document. The HTML page doesn't contain style information directly, but links to the external style. This allows you to re-use a style over many pages.

You can use all three kinds of styles in the same page, but the scope of the style indicates its precedence. A locally-defined style generally overrules a page-level style, which overrules an externally defined style.

Defining a local style

Every xhtml tag allows the <style> attribute. You can attach a style to the tag using this attribute. For example:

This font is a bold italic fantasy font and its foreground color is blue.

<p style = "font: bold italic 100% fantasy; color: blue">
This font is a bold italic fantasy font and its foreground color is blue.
</p>

Local styles are handy when you want to make a very quick change to something and you don't want to go through the effort of naming the element and modifying a page-level or external style sheet. The problem with local styles is they are now embedded into the page, and harder to find than styles in the other formats. It's also tempting to use local styles to micro-manage your page layout, defeating the purpose of CSS by tightly coupling layout and content.

Defining an external style

External style sheets are extremely easy to build and use. You can begin by defining a style at the page level (as you've been doing throughout this course.) When you're ready to convert the style to an external format, simply copy everything between the <style></style> tags to a new text document. (For now, call the new document "myStyleSheet.css" )

Replace the <style></style> tags with the following code:

<link rel = "stylesheet"
      type = "text/css"
      href = "myStyleSheet.css" />

The style will be attached to the page as if it were built into the original page.

External stylesheets are useful when you're creating a large web site. When you design a multi-page web site, all the pages will begin with the same basic design (color scheme, layout, and so on.) Use an external style sheet to define these common elements. If the customer wants you to change a color, you can do it in only one place and all the pages will automatically change.