User stylesheets for display preferences

A stylesheet with “standard” colors

To be written. Note to self: Base this on plain.

A stylesheet with unusual colors

Stylesheets (or browser settings) that use unusual colors (i.e., light text on a dark background) are often unusable because of horrible design out on the web. Many authors often specify only foreground or only background colors on body, td font, or in stylesheets. Image transparency is also often set so it only works with the author's colors.

Therefore, this is a somewhat academic exercise. However, in a good web, an example user stylesheet could look something like this:

/* Fonts and Dimensions */

body {
  font-family: Verdana, "Myriad Web", Syntax, sans-serif;
  font-size: 0.9em;
  margin-top: 3em;
  margin-bottom: 3em;
  margin-left: 8%;
  margin-right: 5%;
  padding: 0;
  }

/* This selector will need to be changed for CSS1 browsers (including
MSIE4-5) by adding :active */
:link, :visited {
  text-decoration: none;
  font-weight: bold;
  }

h1, h2, h3, h4, h5, h6 {
  font-family: Tahoma, Verdana, "Myriad Web", Syntax, sans-serif;
  }

h1, h2, h3, h4, h5, h6 {
  font-style: normal;
  }
  
h1, h3, h5 {
  font-weight: bold;
  }

h2, h4, h6 {
  font-weight: normal;
  }

h1 {
  font-size: 2.33em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  }

h2 {
  font-size: 1.833em;
  margin-top: 1.33em;
  margin-bottom: 0.5em;
  }

h3, h4 {
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: 0.333em;
  }

h5, h6 {
  font-size: 1.33em;
  margin-top: 0.75em;
  margin-bottom: 0.25em;
  }

ul {
  margin-left: 0;
  padding-left: 3em;
  }

li {
  margin-left: 0;
  padding-left: 0;
  }

/* Colors */

body {
  line-height: 1.5;
  background-color: #030;
  color: white;
  }

h1, h2, h3, h4, h5, h6, dt, th, hr {
  background-color: #030;
  color: #FF0;
  }

/* These selectors will need to be changed for CSS1 browsers (including
MSIE4-5) by adding :active to rules for :link and :visited, changing
":link:active, :visited:active" to :active, and removing :focus and
:hover rules (or, for MSIE4-5, changing :link:hover and :visited:hover
to :hover, if desired) */

:link, :visited { background-color: #030; }
:link:active, :visited:active { background-color: #030; }
:link:hover, :visited:hover, :link:focus, :visited:focus { background-color: #600; }
:link { color: #F90; }
:visited { color: #F03; }
:link:active, :visited:active { color: #C93; }

:link img, :visited img { border: medium solid; }

If you really want to see things this way, you can make the colors important and use the universal selector. However, you'll still run into some problems with image transparency:

/* Fonts and Dimensions */

body {
  font-family: Verdana, "Myriad Web", Syntax, sans-serif;
  font-size: 0.9em;
  margin-top: 3em;
  margin-bottom: 3em;
  margin-left: 8%;
  margin-right: 5%;
  padding: 0;
  }

/* This selector will need to be changed for CSS1 browsers (including
MSIE4-5) by adding :active */
:link, :visited {
  text-decoration: none;
  font-weight: bold;
  }

h1, h2, h3, h4, h5, h6 {
  font-family: Tahoma, Verdana, "Myriad Web", Syntax, sans-serif;
  }

h1, h2, h3, h4, h5, h6 {
  font-style: normal;
  }
  
h1, h3, h5 {
  font-weight: bold;
  }

h2, h4, h6 {
  font-weight: normal;
  }

h1 {
  font-size: 2.33em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  }

h2 {
  font-size: 1.833em;
  margin-top: 1.33em;
  margin-bottom: 0.5em;
  }

h3, h4 {
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: 0.333em;
  }

h5, h6 {
  font-size: 1.33em;
  margin-top: 0.75em;
  margin-bottom: 0.25em;
  }

ul {
  margin-left: 0;
  padding-left: 3em;
  }

li {
  margin-left: 0;
  padding-left: 0;
  }

pre, code, tt, textarea {
  font-family: "Monotype.com", "Courier New", monospace;
  font-size: 1.17em;
  }

/* Colors */

body  {
  line-height: 1.5;
  background: #030 ! important;
  color: white ! important;
  }

* {
  background: transparent ! important;
  color: white ! important;
  }

h1, h2, h3, h4, h5, h6, dt, th, hr,
H1 *, h2 *, h3 *, h4 *, h5 *, h6 *, dt *, th * {
  color: #FF0 ! important;
  }

h1, h2, h3, h4, h5, h6, dt, th, hr {
  background: #030 ! important;
  }

/* These selectors will need to be changed for CSS1 browsers (including
MSIE4-5) by adding :active to rules for :link and :visited, changing
":link:active, :visited:active" to :active, and removing :focus and
:hover rules (or, for MSIE4-5, changing :link:hover and :visited:hover
to :hover, if desired) */

:link, :visited { background: #030 ! important; }
:link:hover, :visited:hover, :link:focus, :visited:focus,
:link:hover *, :visited:hover *, :link:focus *, :visited:focus * {
	background: #600 ! important;
	}
:link, :link * { color: #F90 ! important; }
:visited, :visited * { color: #F03 ! important; }
:link:active, :visited:active, :link:active *, :visited:active * {
	color: #C93 ! important;
	}

:link img, :visited img { border: thin solid ! important; }

input, select, option, button, textarea {
  background: #CCC ! important;
  color: black ! important;
  font-weight: bold ! important;
  }

(Up to User Stylesheets Guide, CSS, David Baron)

LDB, dbaron@dbaron.org, 1999-06-15