CSS Basics

How do I use styles on my site?

There are several ways you can use style sheets. The first is simply to create your HTML documents using the style attribute introduced in HTML 4.0. Most HTML tags now support this attribute, and it enables you to define styles on a tag-by-tag basis. For this reason, we recommend against using the style attribute. By applying styles within your tags, you're missing out on the benefits of keeping your content separate from your design.

The next method is to embed the style using a style block in the <HEAD> section of your HTML document. A style block is composed of an opening <STYLE> tag followed by a set of CSS rules followed by a closing </STYLE> tag. For example:

<STYLE>
  BODY { color: navy; }
  H1 { font-size: 12pt; }
</STYLE>

While this method is better than applying styles on a tag-by-tag basis, it still ties the style to a particular HTML document. We recommend using the remaining method, linking an external style sheet, to achieve the greatest flexibility. Linking a style sheet to an HTML document simply requires using a <LINK> tag in the <HEAD> section of every document you wish to apply the style sheet to. For example:

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

Once you've linked a style sheet to your pages, any changes to that style sheet will apply to every HTML document it's linked to. This is where the benefits of style sheets are most apparent, since you no longer have to update every single page in order to overhaul your site's design.

« Previous Next »