1. The html file:

for the text and images in the page

2. The external style sheet:

• for the layout of the page,
• columns, rows,
• backgrounds, borders,
• link properties,
• font styles and
• other repititive design elements

Below is an example of the difference between the same bit of text written in html and using a css class.

A font in bolded, italic red Arial in an html document would require the following code each time that font was used:

"<font color="#CC0000" face="Arial, Helvetica, sans-serif"><b><i>An example</i></b></font> "

In css, you can set up these text attributes one time inside the style sheet, then apply it to the html each time you need it. It will end up being something much shorter like

"<p class="arialib">An example</p> "

Imagine how much less code is required overall and the download time saved by Putting all the design elements (fonts, borders, colors, margins, padding . . .) into the external style sheet. This is a much more elegant, simple and code-saving way to construct a web page.

You can link one style sheet to any number of web pages. Therefore if you decide to change something, for example you decide that you don't like the color of the header text you chose, you can change one thing on the external style sheet and it will change across all the pages it is linked to.