Cascading Style Sheets are easy to design and use if you do not think of your web page as simply "the page" or "the document" or "the text" to be marked up. Instead of thinking about the whole, think of each element as an object that you can define and manipulate.
For one way to look at this, come visit my
HTML* Ice Cream Shoppe
(*No, this time "html" does not stand for HyperText Mark-up Language. Here it stands for Happy Times Merry Learning Ice Cream Shoppe.)
Here you get to fantasize about ice cream sundaes while learning the most important principle behind cascading style sheets.
First, imagine a "basic ice cream sundae." What kind is it? Even for a "basic" sundae, you need to define each element:
This "basic ice cream sundae" is your basic html page. You define "basic" when you add tags to mark-up your text. You define:
Every time someone orders a sundae at the HTML Ice Cream Shoppe the person can take time to order exactly what she or he wants: "I'll have a sundae with rasberry ice cream, marshmallow sauce, extra whipped cream, and no nuts." All that person is thinking is "my sundae." But since I am scooping the ice cream and lavishing on the sauce and goodies, I have to pay attention to each element of the sundae ordered.
In the same way, you cannot afford to just think about a "web page" but must consider each element.
The HTML Ice Cream Shoppe has a fine menu too. Here I offer:
You can imagine that if these menu items become popular it becomes easier to order the flavors and make the sundaes. We have defined certain types of sundaes so that they are always made up of the same elements. Patrons can just order the sundae by name instead of listing each element each time.
Of course, since this is an excellent fantasy Ice Cream Shoppe, if someone wants to order a "Hyper Delight" customized with pistachio instead of walnuts, that is easily done also.
That is how cascading style sheets work. The style sheet defines the menu items. Inside the text you can customize a specific tag, but in general the menu style sheet has defined the elements so you don't have to do it each time you order up a paragraph or heading, for example.
The most important idea behind cascading style sheets is that you do not just fantasize "web page" or "text", but think about each element: the header text, the paragraph text, the links, the background color, etc. You do not have to define each one each time you sit down at the table, er, I mean, the computer. You can prepare a menu. That means you can dig in more quickly.
Copyright by dwang, 1999, 2000. All rights reserved.