The Base Stylesheet

This is a work in progress, last modified 7 November 1998. Please send comments or corrections to the author Todd Fahrner. The sample stylesheet for the CSS2 Recommendation is based on this work, but the editorial development of materials at this location has no official W3C status.

What's here:

Live assets and exhibits

Description and Goals

The Base Stylesheet describes the "consensus default" rendering of all HTML 4.0 elements in Mosaic-derivative Web browsers (Netscape Navigator and Microsoft Internet Explorer). It is intended as a basis for editing or "cascading in" other stylesheet modules, an informative reference, a complement to the HTML 4.0 specification, an exercise in stylesheet architecture, and a browser testing tool. The Base Stylesheet captures the status quo in order to move beyond it.

Epidemiology of the browser default stylesheet

The Mosaic browser's allegedly "neutral" default stylesheet is a simple adaptation of the normative style for (printed) scientific writings in Europe (viz. Wanning, Frank; Internationaler Typographie und wissenschaftliche Textverarbeitung; Haag + Herchen, 1996). This is appropriate enough considering the Web's origins at CERN. In view of the Web's far more common applications in commerce, entertainment, journalism, and the humanities, however, and the deeply entrenched market dominance of Mosaic-based browsers, it is fair to say that "correct" HTML has been infected with a reliably inappropriate style, like a cancer or virus.

The escape of the Mosaic Browser Default Stylesheet (MBDS) virus from the scientific community at NCSA has produced Web generations of mutant tools and authors who misapply markup solely to invoke certain MBDS effects. The use of <p> to produce vertical whitespace and table structures for nontabular information are signature examples. The high reliability of such manipulation accounts for HTML's grotesque cannibalization beyond academia, and the market success of architecturally incongruous HTML extensions for symptomatic relief. To reverse this epidemic, it is necessary first to isolate the virus, and expose its genes to precise and comprehensive manipulation. The Base Stylesheet is a CSS1 model of the MBDS virus, and the first step toward the development of "style antibodies" - comprehensive alternative stylesheets for HTML.

Success criteria

The Base Stylesheet will be successful if:

  1. It is accurate: it must be virtually impossible to determine whether the Base Stylesheet is in effect when viewing any valid HTML 4.0 document in a Mosaic-based browser, assuming the browser implements CSS1 flawlessly. Note: there are no such browsers yet.
  2. It is complete: it must be impossible to write any CSS1 stylesheet which, when positioned "upstream" in the cascade from the Base Stylesheet, will in any way influence the rendering of any HTML element, provided the upstream stylesheet address no elements via CLASS, ID, or contextual selectors, and contain no "important" declarations.
  3. It is terse: it must be impossible to express the same functionality in fewer or shorter declarations. Brevity implies a heavy reliance on inheritance, and heavy inheritance means that fewer declarations need be overridden to effect the kind of wide-ranging or global changes commonly achieved today through "Appearance" dialogs or other UI affordances.

A peripheral measure of success, related to item 3 above, will be to convince browser developers to retool their typical font, size, color, and link-decoration UI elements to modify properties set on the document root element (e.g. HTML) and A in a resident CSS1 browser default stylesheet (such as this), rather than through CSS-orthogonal means. The natural "starting point" for inheritance is the root element. It is important for the possibility of meaningful author-reader balance with Cascading Style Sheets to establish the root element (HTML) as the standard intersection of author and reader styles, with adjustment to other elements propagating by inheritance. Without this becoming standard practice for toolmakers, authors, and browser developers, it will be impossible to evaluate how user default preferences might interact with document stylesheets.

Commented version of the base stylesheet


/* rendered CSS1-addressable elements and all applicable non-inherited
properties set to initial values and default display types */

A, ABBR, ACRONYM, ADDRESS, BDO, BLOCKQUOTE, BODY, BUTTON, CITE, CODE, DD, DEL,
DFN, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, IFRAME, IMG, INS,
KBD, LABEL, LI, OBJECT, OL, P, Q, SAMP, SPAN, STRONG, SUB, SUP, UL, VAR, 
APPLET, B, BIG, CENTER, DIR, FONT, HR, I, MENU, PRE, S, SMALL, STRIKE, TT, U	{
	background: transparent;
	width: auto;
	height: auto;
	text-decoration: none;
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	clear: none;
	vertical-align: baseline;
	list-style-image: none;
	list-style-type: disc;
	list-style-position: outside;
	}	 

ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5,
H6, OL, P, UL, CENTER, DIR, HR, MENU, PRE	{
	display: block;
	}

A, ABBR, ACRONYM, APPLET, BDO, BUTTON, CITE, CODE, DEL, DFN, EM, IFRAME, IMG,
INS, KBD, LABEL, OBJECT, Q,
SAMP, SPAN, STRONG, SUB, SUP, VAR, B, BIG, FONT, I, S, SMALL, STRIKE, TT, U	{

	display: inline;
	}

LI	{
	display: list-item;
	}

/* Begin tree of inherited properties and cascades. */

/* Describes the default type, color, and link decoration specs of
Mosaic-derivative browsers to the extent and degree of granularity that users
may typically override. Uncomment for "factory settings."

HTML	{
	font-family: "Times New Roman", Times;
	font-size: medium; 
	color: black;
	background-color: #BFBFBF;
	}

PRE, TT, CODE, KBD, SAMP	{
	font-family: "Courier New", Courier;
	}

A:link, A:visited, A:active	{
	text-decoration: underline;
	}

A:link	{
	color: #0000FF;
	}
	
A:visited	{
	color: #7F007F;
	}

A:active	{
	color: #0000FF;
	}
	
end pre-CSS user settings */

HTML	{
	line-height: 1.12;
	word-spacing: normal;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	text-indent: 0;
	white-space: normal;
	}

BODY	{
	padding: 8px;
	}

H1	{
	font-size: 2em;
	margin: .67em 0; 
	}

H2	{ 
	font-size: 1.5em;
	margin: .75em 0; 
	}

H3	{ 
	font-size: 1.17em;
	margin: .83em 0; 
	}

H4, P, BLOCKQUOTE, FIELDSET, FORM, UL, OL, DL, DIR, MENU	{ 
	margin: 1.12em 0; 
	}

H5	{
	font-size: .83em; /* varies with pixels-per-em at document root */
	margin: 1.5em 0; 
	}

H6	{
	font-size: .6em; /* varies with pixels-per-em at document root */
	margin: 1.67em 0; 
	}

H1, H2, H3, H4, H5, H6, B, STRONG	{ 
	font-weight: bolder;
	}
	
BLOCKQUOTE	{ 
	margin-left: 40px;
	margin-right: 40px;
	}

I, CITE, EM, VAR, ADDRESS	{ 
	font-style: italic;
	}

PRE, TT, CODE, KBD, SAMP	{ 
	font-family: monospace;
	}

PRE	{
	white-space: pre;
	}

BIG	{ 
	font-size: larger;
	}
	
SMALL, SUB, SUP	{
	font-size: smaller;
	}

SUB	{
	vertical-align: sub;
	}

SUP	{
	vertical-align: super;
	}

S, STRIKE, DEL	{
	text-decoration: line-through;
	}

HR	{
	border: 1px inset; /* questionable */
	}

OL, UL, DIR, MENU, DD	{
	padding-left: 40px; 
	}
	
OL LI	{
	list-style-type: decimal;
	}
	
UL LI	{
	list-style-type: disc;
	}

UL UL, UL OL, UL MENU, UL DIR, MENU UL, MENU OL, MENU MENU, MENU DIR, DIR UL,
DIR OL, DIR MENU, DIR DIR, OL UL, OL OL, OL MENU, OL DIR	{
	margin-top: 0;
	margin-bottom: 0;
	}

OL UL, UL UL, MENU UL, DIR UL, OL MENU, UL MENU, MENU MENU, DIR MENU, OL DIR, UL
DIR, MENU DIR, DIR DIR 	{
   list-style-type: circle;
	}

OL OL UL, OL UL UL, OL MENU UL, OL DIR UL, OL OL MENU, OL UL MENU, OL MENU MENU,
OL DIR MENU, OL OL DIR, OL UL DIR, OL MENU DIR, OL DIR DIR, UL OL UL, UL UL UL,
UL MENU UL, UL DIR UL, UL OL MENU, UL UL MENU, UL MENU MENU, UL DIR MENU, UL OL
DIR, UL UL DIR, UL MENU DIR, UL DIR DIR, MENU OL UL, MENU UL UL, MENU MENU UL,
MENU DIR UL, MENU OL MENU, MENU UL MENU, MENU MENU MENU, MENU DIR MENU, MENU OL
DIR, MENU UL DIR, MENU MENU DIR, MENU DIR DIR, DIR OL UL, DIR UL UL, DIR MENU
UL, DIR DIR UL, DIR OL MENU, DIR UL MENU, DIR MENU MENU, DIR DIR MENU, DIR OL
DIR, DIR UL DIR, DIR MENU DIR, DIR DIR DIR 	{
	list-style-type: square;
	}

U, INS	{
	text-decoration: underline;
	}

CENTER	{
	text-align: center;
	}

CAPTION, COL, COLGROUP, LEGEND, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR	{
	background: transparent;
	text-decoration: none;
	margin: 1px;
	padding: 1px;
	border: none;
	float: none;
	clear: none;
	}

TABLE, TBODY, TFOOT, THEAD, TR	{
	display: block;
	background-position: top left;
	width: auto;
	height: auto;
	}

CAPTION, LEGEND, TD, TH	{ 
	display: inline;
	vertical-align: baseline;
	font-size: 1em;
	line-height: 1.33em;
	color: black;
	word-spacing: normal;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	text-indent: 0;
	white-space: normal;
	}

TH	{
	font-weight: bolder;
	text-align: center;
	}

CAPTION	{
	text-align: center;
	}

/* not part of the legacy browser default sheet, but an obvious enhancement */

OL OL LI	{
	list-style-type: lower-alpha;
	}
	
OL OL OL LI	{
	list-style-type: lower-roman
	}


Agitprop