<style>

Schedule

Intro

Topic:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Project Guidelines

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.

Learning to think this way will be very important if you want to move on to dynamic html (dhtml), which is rather like a marriage of style sheets with JavaScript. It will also help if you move beyond, to the brave new worlds of xml.

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:

• Is the ice cream: vanilla, chocolate, strawberry, neopolitan, lime, cherry, chocolate-chip, mocha, butterbrickle?
• Is the sauce: chocolate, hot fudge, caramel, strawberry, marshmellow, blackberry, rasberry, blueberry
• Does it have whipped cream?
• Does it have nuts?
• Does it get a maraschino cherry on top?

This "basic ice cream sundae" is your basic html page. You define "basic" when you add tags to mark-up your text. You define:

• is the background is white or black or green?
• Is the text black or white or red?
• Do links have underlines?
• What style font do you display?

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:

• Hyper Delight: chocolate ice cream with hot fudge sauce, mound of whipped cream, walnuts and a maraschino cherry on top.
• Text-ure Special: chocolate chip and butterbrickle ice cream with caramel saue, generous sprinkling of nuts and crunchy candies on top.
• Mark-Up Marvel: rocky road ice cream propped up over bananas with splash of chocolate, strawberry and caramel sauces, whipped cream, marschino cherries and nuts.
• Language of Love: black cherry ice cream with chocolate sauce, whipped cream and double helping of maraschino cherries.

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.

Return to Unit 10