HTML was set up to be a language to describe the different elements which make up the contents of a page, and not to specify the layout of these elements. For example, if you use a <H1> tag to specify a level 1 header, you should do that because it is the most important heading in the document, not because you want to show the text in a larger font, as most browsers do. Perhaps someone writes a browser which creates an outine of a page by showing an indented table of all headers, where the indentation level depends on the level of the header. A document in which headers are used only because they show up with a larger font will not create a correct outline for such a browser. This is where Cascading Style Sheets come in. Style sheets specify how elements inside a HTML page should be rendered by a browser. The complete specification for the level 1 reference of the cascading style sheet mechanism is available at http://www.w3.org/pub/WWW/TR/REC-CSS1 . Using style sheets You can apply style sheet information in a HTML page in several ways: Link to an external style sheet with the LINK tag. Supply style sheet information with the STYLE tag. Inside this tag you can put style sheet information, and link to an external style sheet. Add style sheet information to a HTML tag with the STYLE attribute. You must use a browser that supports style sheets to view the following examples properly.

CLASS	This attribute can be used with all HTML tags inside the 'BODY' section of the document. It is used to create different classes of a tag, where each class can have its own properties. For example, lets say we have defined this style sheet: <STYLE type="text/css"> DIV.ferrari {background: #A00000; color: white;} DIV.ford {background: black; color: white;} </STYLE> This creates two classes for the DIV tag, "ferrari" and "ford", each with its own colors. Then you could use these classes: <DIV class=ford> Henry Ford's favorite color was black, so were all his cars. </DIV> <DIV class=ferrari> For a car to be a real Ferrari it has to be red. </DIV> With the following result: Henry Ford's favorite color was black, so were all his cars. For a car to be a real Ferrari it has to be red. You can omit the tag name when you define the style sheet. This means that the class is not restricted to one specific tag, but can be used with every tag. For example, this style sheet defines the class ".nature": <STYLE type="text/css"> .nature {background: #00A000; color: #E0FFE0;} </STYLE> This class can now be used with all tags: <TABLE border> <TR> <TD>A normal table cell</TD> <TD class=nature>A table cell with a style sheet</TD> </TR> </TABLE> <UL> <LI class=nature>A natural item. <LI>A standard item <UL> A normal table cell A table cell with a style sheet A natural item. A standard item
ID	This attribute defines a unique identifier within the page. An ID is composed by an initial letter followed by letters, digits, "-" and "." characters. The letters are restricted to A-Z and a-z. You can use this ID to set the style sheet information for the tag where the ID is defined, by preceding the ID with a #, for example : <STYLE type="text/css"> #xyz {font-size: 20pt;} </STYLE> <DIV ID=xyz>The special xyz division</DIV> Which looks like this: The special xyz division This is what the W3C Recommendation "Cascading Style Sheets, level 1" says about using the ID attribute with style sheets: By using the ID attribute as selector, one can set style properties on a per-element basis. While style sheets have been designed to augment document structure, this feature will allow authors to create documents that present well on the canvas without taking advantage of the structural elements of HTML. This use of style sheets is discouraged.
STYLE	With this attribute you can place style sheet information directly with a tag, so that it will be used to render the contents of this tag. Using this attribute overrides style sheets from a linked style sheet, identified with the LINK tag and style sheet information defined in the head of the page, using the STYLE tag. <DIV style="background: red; color: yellow;font-size: 200%;"> This text has its own style </DIV> This text has its own style