Section 1: Introduction
Here's an analogy to explain the relationship between HTML and CSS.
HTML provides the structure (and often the content) of a document.
Think in terms of the Mr. Potato Head toy that all Idaho children are required by law to have.
-
You start with the potato:
- Like the potato, HTML provides only the form, but by itself is rather bland, and sometimes even ugly.
- So how can we improve its appearance?
Section 2: Styles
CSS offers a variety of ways to dress up, or format, an HTML document, just like the parts that can be used to "decorate" a Mr. Potato Head body:
| Hats |
|
|
|
|
|
|
| Eyes |
|
|
|
|
|
|
| Glasses |
|
|
|
|
|
|
| Noses |
|
|
|
|
|
|
| Mustaches |
|
|
|
|
|
|
| Mouths |
|
|
|
|
|
|
| Ears |
|
|
|
|
|
|
| Arms |
|
|
|
|
|
|
| Shoes |
|
|
|
|
|
|
| Accessories |
|
|
|
|
|
|
You can mix and match the Mr. Potato Head parts to determine how he (or she) looks.
- You can choose which eyes are used, which lips, which nose, which ears, etc.
- In CSS you can choose how each type of heading line should look, how the paragraphs should look, how lists, and images, and everything else should look.
Section 3: Styles Applied
By applying different styles to an HTML document, you can change its appearance, just like with Mr. Potato Head.
- Different combinations of accessories can change the outward appearance of the bland potato or HTML document.
Here's an example of one HTML document (the potato) with one set of CSS styles (or Mr. Potato Head accessories) applied:
Now here is the bland tater with yet another set of styles:
And another...
And the coup de grâce!
The appearance of a single potato, or HTML document, can be drastically changed by the application of different accessories, or CSS styles.
- The potato, though, remains unchanged.
Visit the CSS Zen Garden to see the impact of changing style sheets on a single HTML page.