Make your own free website on Tripod.com

Cascading Style Sheet Level 1- CSS 1

What are style sheets?

If you've ever created a web site, you've most likely used an assortment of <font> and other tags to control how your pages look. This ties the presentation of your site with its content, making it hard to modify your site's design. Suppose you later decide you want to change the color scheme or fonts used in your site - you'll have to edit every page in order to do this.

Style sheets provide a solution to this problem. Instead of defining the site's design in each and every page, you can use a style sheet to control the overall layout of your site. Then if you want to change how your site looks, you simply modify the style sheet.

What does a style sheet look like?

A style sheet is made up of rules that look something like this:

H1{
     font-family: "TIMES NEW ROMAN";
     font-style: BOLD;
    color: RED
   }

Each rule begins with a selector, which is H1 in the example above. A selector is normally one or more HTML elements (tags), and the declarations inside the rule describe how those elements should appear. A declaration is simply a CSS property followed by a value. For example, the declaration "font-style: BOLD;" is composed of the property "font-style" followed by the value "BOLD". So, this example states that every <H2> HTML tag should use an TIMES NEW ROMAN BOLD font and be colored RED.

You can also use classes as selectors, which aren't tied to specific HTML elements. For example, consider this rule:

.redbold {
    font-family: TIMES NEW ROMAN;
    font-style: BOLD;
    color: RED
    }

The declaration block is the same as that in the previous example, but instead of using H1 as the selector, we're using the class .redbold. Note that .redbold doesn't mean anything special - you can use anything as a class name provided that it starts with a period and is composed of a single word (spaces and underscores are not allowed).

To apply a class to an HTML tag, you use the the class attribute (which was introduced in HTML 4.0). For example, to apply the above style to an <H1> tag, you'd use:

   <H1 CLASS="redbold">this is redbold<H1>

(note that the period before the class name is not included).

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: pink; }
  H1 { font-size: 6pt; }
</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.

What are the drawbacks of style sheets?

Style sheets do have a downside. Right now the biggest problem is the imperfect CSS implementations that today's browsers offer. Even though the W3C issued their CSS1 recommendation way back in 1996, not every browser fully supports it. Although recent browsers from Microsoft and (most notably) Opera Software include fairly complete CSS1 support, older browsers - Internet Explorer 3 and Netscape 4 in particular - are not only incomplete in their CSS support, but what they do support is often very buggy as well.

This makes it very difficult to create style sheets that work across all browsers, since what looks good in one browser may look awful in another. Some web authors use JavaScript to serve up a different style sheet for each browser, but we don't recommend this since it negates some of the reasons you'd want to use CSS in the first place.


jump to the top of this page