</style>
</head>
<body>
<img WIDTH=320px HEIGHT=264px src=”GrandfatherHouse.jpg”>
</body>
</html>
Everyone has gotten accustomed to HTML’s perfectly serviceable punctua-
tion techniques for years. For a property (such as the widthattribute), you
use the equals sign (=) to separate the property name (width) from the value
that you assign to that property (320px, in the sample code above). If more
than one property is present, they’re separated by simple spaces, just like
words in an ordinary sentence: width height src, and so on. The entire
element is enclosed in < >symbols. Everyone is used to this punctuation
and knows exactly how it works. It’s clear, clean, and effective.
Then along comes CSS with the decision to replace greater-than (>)and less-
than (<) symbols with the braces {}as a way of enclosing each style. Why
couldn’t they have made everyone’s life simpler and just stuck to the tradi-
tional, well-established <>symbols? By changing the rules, they introduced
lots of confusion and bugs. People who write CSS code now have to keep
making mental notes and switching between HTML and CSS punctuation
when writing the same fundamental grammatical structures of properties and
their values. Also, you can no longer simply copy an HTML element with all
its attributes, and then paste it into a CSS style rule. That would have been
too convenient, too efficient.
What’s more, HTML uses an equals sign to separate each property from its
value. This is traditional, classic computer programming punctuation that
has been in use for decades. Along come the wise ones at CSS and decide to
make up some funny, unique trick of their own. Perhaps someone in some
meeting said, “Hey, everyone understands and uses the equals sign. Let’s stir
things up and cause lots of bugs by making them use a colon in CSS code to
separate a property from its value (border: silver). That way, two differ-
ent punctuation styles are used for the same thing. Programmers and design-
ers will keep getting them mixed up and have to waste a lot of time debugging
their Web pages!” If I ever meet this joker, I’ll have a few choice words for him
or her.
Finally, HTML sensibly separated property/value pairs with spaces, like this:
width=320px height=264px
298 Part IV: Advanced CSS Techniques
