Sent by Eric A. Meyer on 22 March 2002 11:11
At 10:52 -0500 3/22/02, Darren I. Shrager wrote:
>I was hoping you all could enlighten me a bit. Can you tell me the virtues
>of CSS, why it is so vital these days, and what makes it better for layout
>than tables and the like? In other words, why is it so necessary to learn
>CSS?
The best answers I've seen come from Martina Kosloff-- one of them
is in my signature file-- so hopefully she'll chime in, if she's
watching the list.
I can provide an example of a practical payoff, taken from chapter
1 of the book I'm finishing up this weekend. I took a file that was
all HTML presentation, with FONT tags, nested tables, and so forth.
Then I stripped the table down to its bare essence, yanked out all
the FONT tags and space GIFs, threw in some class and id attributes,
and styled the document so it ended up looking exactly the same as
the HTML version (in a v5 browser). Here's the comparison table
between the two versions:
Method Size Char. Server Images Tables Font
Hits Tags
All HTML 100% 10568 4-18 17 11 49
HTML+CSS 64.5% 6819 3 2 5 0
HTML 44.8% 4738 3-4 2 5 0
+LINK +2112
The table makes more sense with the supporting text to explain it,
but the bottom line is that I got the HTML document down to 64.5% of
its original size including the stylesheet embedded within the
document, and to 44.8% original size if I made the stylesheet
external and LINKed it in. Of course the stylesheet still has to be
loaded but the two together are about 65% the size of the original
HTML file. In addition, the number of server hits necessary to
display the page dropped by at least one.
Plus, the HTML itself became much simpler and easier to read,
whereas the original table-and-GIF version was a mess of markup and
the content was hard to pick out. The payoff there is that it would
be easier, down the road, to make edits to the content or even to
figure out how to restructure the HTML.
[Side note: the final converted page still uses a simple table to
block out the structure of the page, and I didn't use positioning.
So even though the document size could have been further reduced, I
chose to be more practical.]
Then there is the fact that CSS lets you do things that HTML-based
presentation can't touch-- changing the case of elements, placing an
overline on text, making links block-level elements, and much more.
And, if you link all of your documents to a single external
stylesheet, as many sites do, then you can change the appearance of
the entire site by editing (or replacing) a single file. One
incredibly compelling example is Chris Casciano's recent Daily CSS
Fun, where he wrote 20 very different style sheets that radically
altered the appearance of the same HTML document; see
<http://www.neuralust.com/~cac6982/200202/> for a wrap-up and links
to every design.
That's all that springs to mind right away, although I can offer
one more observation of a personal nature. I've been working with,
learning, teaching, authoring, and writing about CSS for the last six
years, and it still fascinates me. I still find new ways to do
things and new capabilities I hadn't seen before. It's like being an
artist and continually finding new colors with which to paint.
--
Eric A. Meyer (http://www.meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
-- Martina Kosloff (http://www.mako4css.com/)
