lizard's asylum stylesheet

why stylesheets work

(This page will look better if you use a browser that supports web standards, although it can be accessed by most browsers. Upgrading to a standards-compliant browser will enhance your reading experience.)

Notes

DIV IDs:

#bodywrap: Wrapper DIV for the whole body area. Used in version 2.1 files; allows version 2.0 files to coexist with version 2.1 files.
#links: DIV used for node list links.
#headlinks: DIV for head image and links
img: Ensures that images display in v2.1 files. The v2.0 stylesheet forces images to be hidden.

Classes

h3.inpara: Inline third-level heading. Used to introduce entry sections; only used in version 2.1 files. Will not work properly if there is no containing #bodywrap DIV.
h4.inpara: Inline fourth-level heading. Used in technical.html date entries.
.links: Used for the header image and header links.
.copyright: Used for the copyright branding at the bottom.
.bk2top: Used for the back to top link at the bottom of long entries.
a.substlnk: Text substitute links. Allows v4.x browsers to maintain a link to the current entry when the header image is hidden.
.ahem: Class for warning text. Hides warning text provided for v4.x browsers; people with v4.x browsers see the text, while CSS-2 compliant browsers don't.

Typography/Colophon:

Base font: Arial/Helvetica
Body text: 11 pixels
First level Heading: 28 pixels, normal
Second level Heading: 14 pixels, normal
Third level Heading: 12 pixels, bold
Fourth level Heading: 11 pixels, normal, underlined

Stylesheet uses pixels as a base unit, instead of points or ems. Printing any of the pages may result to unreadable text. Currently, a printer-friendly stylesheet is unavailable.

Stylesheet conforms to the W3 Consortium's CSS, Level 2 Specification.

Several stylesheets are used. The v2.0 stylesheet is a basic font stylesheet, without any layout code. The v2.1 stylesheet contains layout code, and is loaded by an @import directive, instead of the usual LINK tag. The @import directive is CSS-2, and non-compliant browsers do not understand it; non-compliant browsers do not load the v2.1 stylesheet. A third stylesheet (also loaded using an @import directive) contains v2.2 layout-specific changes to the base v2.1 stylesheet.

Version 3.0, however, uses a base sheet that derives itself from the v2.1 stylesheet. The version 3.0 stylesheet (v3base.css) is also loaded by an @import directive.

Stylesheet code

v21styles.css Version 2.1 layout styles
v22styles.css Version 2.2 layout derived styles
v3base.css Version 3.0 layout derived styles/base stylesheet