The Stylesheet

Pages have a structure even when they have no content. A stylesheet tells those pages how to behave. Here are a few entries from my stylesheet and a selection of elements used to create text-only layouts. For a few ideas on how to make the content of a page behave, see The Elements of Textware. When you want to discuss style and content in detail, contact me.

• Stick to a well-defined set of style guidelines
• Select the site colors from a small, balanced palette
• Stylize your site using a cascading stylesheet (CSS)
• Add a common header to each page to welcome the reader and unify the site appearance
• Add a footer to each page to contain navigational aids and legalese
• Use menus to guide users through your site
• Use scripts sparingly
• Organize your page layout with tables

Note: the haiku for this page is contained in a single "global" table beginning above the topmost hairline and ending below the bottommost hairline; the header, marquee, this text section, and each entry are "local" tables that reside as data within rows of this global table.

Stick to a well-defined set of style guidelines

• Use tables to organize your layouts. Within each table use a summary tag and standardized text to indicate the purpose of the table.
• Use frames only when no other solution takes care of the problem you want frames to solve. Screens lack the real estate you need to properly carve them into useful sectors.
• Push what you can into the cascading stylesheet (CSS), which for this file is wpf-0000.css.
• Order tag element attributes alphabetically or group elements logically and consistently within tags.
• Use the BASE tag to properly aim the browser at the directory holding your files.
• Start each page with a byline box and end it with a copyright box. The byline is hyperlinked to the homepage of the bylined writer. Both the byline and copyright boxes can contain links to other pages. The byline box can include a brief orientation to the contents of the page.
• Put the file's byte count adjacent to the byline, enclosed in parentheses. If your file is part of a compound load (a page built of the file plus other URLs), put the total byte count adjacent to the byline. When you cannot control the total byte count of a compound load because you have linked to someone else's document, recalculate the total load every time you validate your links and update the value adjacent to your byline.
• Tag the first and last hairlines respectively as "filenameheader" and "filenamefooter". (Yes, put the period outside the quotation because it is not part of what you'll use as a tag name.)
• Internally tag the document with anchors so subsequent calls to points inside it are easier.
• Use ALT, HEIGHT, and WIDTH tags for every image so they make sense when not displayed, and allow fast page loads when displayed.
• Retain the thematic quality of each URL when editing its content. People link to URLs based on their thematic nature and changing that changes the meaning of what is built around them. For example, if I link to an URL because it goes into depth on a subject I am covering and that URL later changes to a brief definition or a GIF image, my semantics break. Links function as parts of speech in the documents containing them.
• Point to the "filenameheader" (the first hairline) at the end of the page using a "[header]" tag.
• Put the page headline in a table.
• When using a contents bar to hyperlink into the page, put it in another table at the top of the page.
• Supply a link for email contact references. For example: Contact me with your questions.
• Do not include punctuation marks in hyperlinks unless the mark is imbedded in the link or an entire sentence is hyperized.

Select the site colors from a small, balanced palette

Specify the colors assigned to your layout elements. Maintain visual consistency throughout your site by adhering to this standard. If you don't know how to harmonize the colors using a Web palette, have it done by a graphics professional.

Stylize your site using a cascading stylesheet (CSS)

Cascading stylesheets control the site style at a single point, allowing you to make site-wide changes using a single file. The effects stylesheets create can be simple, such as highlighted text...

This text is set off with shading set by the stylesheet.

or more complex, such as URLs that light up on a mouseover...

and menus with location lights indicating your position within the site...

that look like this when you move to a new page...

Add a common header to each page to welcome the reader and unify the site appearance

Headers welcome the reader to each page and present a uniform site-wide look-and-feel. Here is a fat banner header...

Left dogear text

This header is a single-row, three cell table; the hairlines are at 50 percent; and should be at 100 percent on an actual page; an image goes in the cell to the right; the color is used site-wide to unify the appearance

Here are some solid stripe bars...

And hear are some asymmetric split stripe bars...

Add a footer to each page to contain navigational aids and legalese

Footers give users reaching the bottom of a page a sense of conclusion and place. Border the footer with hairlines above and below it. Distinguish the footer text using a smaller, bold typeface.

Footer text for navigational aids and legalese. The hairlines here are at 50 percent and should be at 100 percent on an actual page. An H5 tag shrinks and bolds the typeface.   © Copyright William Paul Fiefer.

Use menus to guide users through your site

Menus allow users to traverse a site quickly and reach places they routinely visit. Menus can be graphical or text based. For example, you can use a solid shaded menu bar...

or a symmetric split shaded menu bar...

or menu bars made entirely of text...

The stripe bars used as header examples also can serve as menus.

Use scripts sparingly

Scripts often are platform-dependent and will not run correctly across multiple browsers. Write and use robust scripts that rely on code elements common to every platform or that use switches to detect browsers and execute browser-specific code. Insert comment tags into your scripts so their code does not appear in a browser window.

To re-execute this script, which tells the time, refresh the browser. (Here we control font size with -1.)

Organize your page layout with tables

Tables let you tightly control page layout and the spacing of elements on a page. Because the user's browser renders tables and table colors, you do not incur the download penalty you otherwise would if you used GIFs, JPEGs, or PNGs to structure your page.

You can build a page out of two or more stacked tables (border for visibility only)...

or out of tables set side-by-side (border for visibility only).

You can place the entire page in a borderless single table...

or within a bordered single table...

or you can lay a page inside a single table split vertically by cells (border for visibility only) to mimic columns.

Add it all together to build complex page layouts...

© Copyright 1992-2008, William Paul Fiefer ( yamada@prairienet.org), all rights reserved. You incur specific legal obligations under the terms of my copyright and little else under my privacy policy. This page is made possible by maple.sugar.buddha™ and translated into English by my Mom. Sweet enlightenment!™ Last updated 01 January 2008.