Alice with CSS

The power of CSS in modern web design

Introduction | Example Text | Discussion | Navigation Issues

Silhouette of a child sitting behind a tree during sunset reading a book.

Introduction

Alice with CSS is a companion to Alice without CSS.

These pages are intended to be studied together. JavaScript must be enabled.
Both should be open in separate tabs so you can examine the differences.
Content on both pages are identical except CSS is disabled in Alice without CSS.

Alice with CSS should be open in a separate tab from Alice without CSS.

CSS Information is Different

The only difference between Alice with CSS and Alice without CSS is that CSS is disabled in the latter. There is some distinctive wording in this introductory section.

See the discussion for an explanation.

Return to top

Alice’s Adventures in Wonderland

This extract from Alice's Adventures in Wonderland demonstrates an example of how CSS markup can enhance the display to make reading a page easier.

“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.’”

This text was adapted from the Project Gutenberg version of Alice's Adventures in Wonderland, Chapter IX.

Return to top

Discussion

This discussion section will be easier to read on Alice with CSS than on Alice without CSS.

Alice with CSS displays the same content as Alice without CSS but the missing CSS file won't allow the page to display properly.

This page gives you an example of the power of CSS in both the layout of a page and in the aesthetics of page colour, layout, navigation, etc. The information is unchanged, but the presentation is clearly superior when CSS is used.

CSS is also used to separate the layout from the content. CSS can easily modify content depending upon the size of the screen.

Editing Content Easier

Replacing the layout HTML with CSS removes most of the HTML normally used for layout. Page edits are much easier and cleaner. You can make site-wide changes by altering a simple element in the CSS file.

Presentation Enhanced by CSS

The information is unchanged, but the presentation is clearly superior when CSS is added.

The natural layout of page elements makes it relatively easy to read in Alice without CSS — at least compared to traditional sites — but I'd rather view it with the CSS enabled, wouldn't you?

Return to top

The navigation on this site is dependent upon CSS to display correctly.

Look at the site navigation at the top of this page as an example.

Both the main navigation and the bread crumb menu are simple lists redefined by CSS to display horizontally.

Missing CSS Breaks Navigation

When CSS is missing the navigation is present, but the layout is broken.

Better in HTML5

Navigation is greatly improved in modern browsers supporting HTML5, displaying the navigation menu at the top of the page even if the CSS is missing. However, without CSS the layout is quite crude.