Authoring/Development - Cascading Style Sheets

Cascading Style Sheets (CSS) enable you to have much more control over the style of your site than just HTML. Plus, you can make changes to your entire site by editing a single file.

There are actually a few different ways to use CSS. We'll go over inlining, embedding, and linking to give you an overview of your options.

Inlining

When inlining, the style is defined at the place you want to change the style. For example, to indent a paragraph, you would modify the <P> tag:

  <P STYLE="text-indent: 5em">This paragraph is indented.</P>

5em" means that it's indented about five spaces (it's actually five times the height of the font).

With the above code, you have affected only the one paragraph. Obviously, if you want all your paragraphs to be indented, this approach can get tedious.

Embedding

To affect all paragraphs in a page, you could embed a style sheet in your document HEAD, like this:

  <STYLE>
      <!--
      P{text-indent: 5em}
      -->
  </STYLE>

This affects the entire page. Anywhere you use the <P> tag, your paragraph will be indented.

Linking

But what if you want this style to affect your entire site? That's when linking a style sheet is extremely useful. Here's what you would put in your document HEAD for each page of your site:

  <LINK REL=StyleSheet HREF="style.css">

where style.css is replaced by the name of your CSS file. The CSS file itself would look like this:

  P{text-indent: 5em}

Notice you would not use the <STYLE> tag or any HTML in your CSS file. With this method, you would use the <P> tag in your HTML as normal and all your paragraphs in your entire site will be indented.

These examples are just a short introduction. CSS can enable you to have a great amount of control over your site's style. The following CSS resources can help you learn more:

Web Design Group's Guide to Cascading Style Sheets
Apple's Introduction to CSS Layout