Russ Harvey Consulting - Computer and Internet Services

Alice with CSS

Demonstrating the Power of CSS in Modern Web Design

This page is a companion to Alice without CSS. These pages are intended to be studied together. Both pages are identical except for this first section.

Thumbnails of both pages are shown below (before these thumbnails were added). Notice the massive difference CSS makes!

Screenshot of Alice with CSS.       Screenshot of Alice without CSS.

CSS Information INTACT on this Version

The CSS is INTACT on this page (otherwise it is identical following this introductory section). See the discussion for an explanation.

The discussion section on this page will be easier to read than the one on the Alice without CSS (which should be open in another tab once you've clicked the link at the top of this section).

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

Return to top

Discussion

“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, etc. The information is unchanged, but the presentation is clearly superior when CSS is used.

Content is Separated from Layout

CSS is used to separate the layout from the content.

Traditionally, many web designers used “invisible” tables to place sections of the page where they want. However, this method has tremendous weaknesses in two major areas: accessibility and editing content.

Accessibility

Because tables are laid out in the following format:

<table>
  <tr>
   <td>Row 1, Column 1</td>
   <td>Row 1, Column 2</td>
   <td>Row 1, Column 3</td>
  </tr>
  <tr>
   <td>Row 2, Column 1</td>
   <td>Row 2, Column 2</td>
   <td>Row 2, Column 3</td>
  </tr>
</table>

the content makes sense if it is used to present standard tabular data, as was intended by the designers of HTML.

For example, if you were to present the following table:

Open Windows Survey
Day: Windows Open: Windows Closed: Total Windows:
Friday 12 48 60
Saturday 20 40 60
Sunday 46 14 60

The person could probably discern that the days were getting progressively warmer and/or there were more people home during the three days recorded in the table.

Tables for Layout Confusing

However, if you then "massage" the tables to represent headers, navigational areas, etc. this can be confusing because the logical flow of the data is disrupted.

Table layout won't adapt to display properly in mobile devices.

  • With CSS enabled, this page will collapse into a single column and the menu will be replaced with a adapted mobile menu.
  • Without CSS this page will display in a single column even if there is room to display the sidebar.

Faster Load Times

Traditional table layouts and markup need to encase the text it is modifying. This adds a great deal of weight to a page.

Because the layout has moved to an separate CSS file (shared between all the pages on the site) it doesn't need to be loaded each time you open a new page.

Editing Content Easier

Separating layout into the CSS file removes much of the HTML that would otherwise need to be present. There is much less to deal with when editing the content, making edits much easier than if the layout was encumbered with additional markup.

Making a simple change in the CSS file can create site wide changes. Since the various fonts are defined in that CSS file, you won't have to search and replace all the references to Times-New Roman if the client decides that Arial is a better font.

Presentation Enhanced by CSS

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

The natural layout of these page elements is easier to see in Alice without CSS, but I'd rather view it with the CSS enabled. Wouldn't you?

Return to top

www.RussHarvey.bc.ca/resources/alice1.html
Updated: April 17, 2017

An open book on a table.

Navigation Issues

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. However, one displays as white text on a blue background while the other displays as light grey text.

Missing CSS Breaks Navigation

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

In fact, without CSS the two menus overlay each other and display as unformatted plain text links.

The only difference is that the layout and positioning is defined with different CSS classes — which messes things up when it is missing.

It Sort of Works

Without CSS navigation sort of works.

You can click on the “Site navigation” text link to bring down these menus so they are workable.

HTML5 displays the navigation menu at the top of the page even if the CSS is missing.

The old XHTML version displayed navigation at the bottom of the page because CSS was used to reposition it at the top.

Return to top