Alice Without CSS
This page is a companion to Alice's Adventures in Wonderland—With CSS. They are intended to be studied together to demonstrate the power of CSS in modern Web design.
CSS Information Removed
You've no double noticed the stark contrast in how this page is laid out and that much of the colour is gone from this page compared to the page you just came from. In fact, I'm sure you're thinking something has gone wrong!
On this page, I've intentionally removed the CSS (Cascading Style Sheets) that defines the layout of the page and redefines much of the content in order to demonstrate the power of CSS. The navigation, page layout and content inside the Example Text are identical. Only this introduction and the discussion is different on each page.
To learn more, see the discussion.
Alice's Adventures in Wonderland
This section of text is from Chapter IX of Alice's Adventures in Wonderland and is adapted from the Project Gutenberg version.
“You can‘t think how glad I am to see you again, you dear old thing!” said the Duchess, as she tucked her arm affectionately into Alice’s, and they walked off together.
Alice was very glad to find her in such a pleasant temper, and thought to herself that perhaps it was only the pepper that had made her so savage when they met in the kitchen.
“When I’m a Duchess,” she said to herself, (not in a very hopeful tone though), “I won’t have any pepper in my kitchen at all. Soup does very well without—Maybe it’s always pepper that makes people hot-tempered,” she went on, very much pleased at having found out a new kind of rule, “and vinegar that makes them sour—and chamomile that makes them bitter—;and—and barley-sugar and such things that make children sweet-tempered. I only wish people knew that: then they wouldn't be so stingy about it, you know—”
She had quite forgotten the Duchess by this time, and was a little startled when she heard her voice close to her ear. “You’re thinking about something, my dear, and that makes you forget to talk. I can’t tell you just now what the moral of that is, but I shall remember it in a bit.”
“Perhaps it hasn’t one,” Alice ventured to remark.
“Tut, tut, child!” said the Duchess. “Everything’s got a moral, if only you can find it.” And she squeezed herself up closer to Alice’s side as she spoke.
Alice did not much like keeping so close to her: first, because the Duchess was very ugly; and secondly, because she was exactly the right height to rest her chin upon Alice’s shoulder, and it was an uncomfortably sharp chin. However, she did not like to be rude, so she bore it as well as she could.
“The game’s going on rather better now,” she said, by way of keeping up the conversation a little.
“’Tis so,” said the Duchess: “and the moral of that is—‘Oh, ’tis love, ’tis love, that makes the world go round!’”
“Somebody said,” Alice whispered, “that it’s done by everybody minding their own business!”
“Ah, well! It means much the same thing,” said the Duchess, digging her sharp little chin into Alice’s shoulder as she added, “and the moral of that is—‘Take care of the sense, and the sounds will take care of themselves.’”
Discussion
CSS Defines Layout and Styles Content
Because I've removed the CSS information from this page, there is now no information to:
- define the layout of the page; and
- redefines much of the content (specifying fonts, colours, indents and more).
This was done in order to demonstrate the power of CSS.
Also, this page is still usable, if somewhat awkward—degrading gracefully for older browsers and devices that cannot "see" CSS.
An Example: Image Borders
If you scroll to the bottom of the page, you'll note that the linked image has a border around it. This is because I have not used the deprecated border="0" attribute, but instead have correctly made that change in the CSS:
a img {
border: none;
}
Remember that when you're looking at the layout, this page is identical to Alice's Adventures in Wonderland - With CSS except that this page has no CSS applied.
The "information" is unchanged, but the presentation is clearly superior when CSS is added.
www.RussHarvey.bc.ca/resources/alice1.html
Updated: February 12, 2008
