The style

HTML tags were originally designed to define the content of a document only.

They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using syntactical tags like h1, p, table and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

As the two major browsers (Netscape and Internet Explorer) continued to add new HTML tags and attributes to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.

To solve this problem, the World Wide Web Consortium (W3C), the non profit, standard setting consortium responsible for standardizing HTML, created STYLES in addition to HTML 4.0.

You can insert the style, as you know, in the head section of the page, but, otherwise, you can store it in external Style Sheets linked to all the site pages. So your site will have an only style.

A Style Sheet must have the .css extension (exemple: mystyle.css) and so it is not a HTML file.
CSS stands for Cascading Style Sheets.

An external Style Sheet can save you a lot of work! You can change the all site layout, changing only the mystyle.css file! But, each page of your site must be linked to the style sheet in this way:

In an external Style Sheet there aren't tags, but only the css code that you usually put in the style tag in the head page section. You can edit a style sheet by your usual editor, but you must save it with the .css extension.
Let take a look:

 BODY { font-family:Verdana; font-size:x-small;
		 background-color:#ffff99; color:navy }

H1 {font-size:medium; text-align:center}
H2 {font-size:small}

A:link {color:blue}
A:visited {color:#cc3399}
A:hover {color:white; background:navy}

TABLE {width: 100%;  border:5px solid #cc0000 }

TD  { border: 2px solid #cc0000;	background-color:white;
      font-size:small; text-align:left; padding:20px }

The classes

Imagine you want two different kind of paragraphs in your HTML document:

• one with red characters and right aligned (we'll call it paragraph class red)
• another one with green characters and center aligned (we'll call it paragraph class green).

You can use different classes with other HTML elements too, except the body, of course.