HTML's original purpose was the efficient delivery of text documents over limited bandwidth channels. To accomplish this efficiency, much of the document formatting was left to the viewer's browser. In addition, at that time commercial Internet traffic was forbidden. Little need was seen for control of this formatting by the author. The Web has evolved dramatically since then. A need for increased control of formatting has emerged. This need has resulted in the appearance of Cascading Style Sheet technology. In addition, this technology when combined with JavaScript, can add dynamics to a Web page.

A style sheet is a set of style rules, written as a block of code, that tell a browser how to present a document. Each rule includes:

a selector - often a HTML tag such as <body> or <p>
a property - such as font-family or margin-right
a value - such as Comic Sans MS or 20%

The format for each rule is:

selector {property1:value1; property2:value2; ... }

For example, body {font-family:"Comic Sans MS"; margin-right:20%;} is a rule.

Cascading Style Sheets allows you to separate your web sites design from it's content. All the design elements (colors, fonts, backgrounds, page layout, etc) are stored in a Cascading Style Sheet file with the extension of '.css'. All your web pages link to this file to get their design information. If you need to change the design, you only need to edit one file to change the design elements on your entire website. Your site is very flexible. It is easier to create pages and to maintain them. The site is more consistent since all pages get their design information from the same source.

CSS is not supported by all browsers out there but it is supported by the majority of browsers. CSS incompatible browsers will display a plain HTML page without the design elements added by CSS.

CSS has many powerful design features. Websites designed heavily with CSS may not display properly when viewed in a non-CSS capable browser. To test your web site, turn off Cascading Style Sheets in your browsers preferences and view your site. The site should display in a normal way and be easily readable.

Style sheets are ordinary text files that can be created in any text editor. The style sheet file must have the file extension of .css

If you were to apply a style sheet with the rule above to your HTML files, every instance of the H1 tag would now be formatted as blue.


©2006 Ziost Technologies. All rights reserved. Terms of Use \| Privacy Statement \| Links