Visualizing HTML elements with a CSS style file "texinfo_bright_colors.css"

[Jaakko Hollmén]

Dear Texinfo'ers,

During the weekend, I was experimenting with a cascading style
sheet (CSS) file that would display HTML output created from texinfo
documents, and I'm sharing the result here. I'm eager to hear if it
is any useful. If it is, or provides a good basis for further  
development,
it may as well be be included in the texinfo distribution.

The utility could be two-fold: to observe the structure of the
HTML from a texi2html development point of view, or to learn what
the HTML output will look like from a document writer's point of view.
I am one of the latter, interested in the former.

I have called the CSS style file "texinfo_bright_colors.css", so
don't be surprised to see a "very colorful" (!) HTML output indeed.

Best regards,
Jaakko
--
Jaakko Hollmén, Department of Information and Computer Science
Faculty of Information and Natural Sciences,  Aalto University
School of Science and Technology, P.O. Box 15400, 00076 Aalto
Finland, tel. +358 9 470 25290, mobile +358 50 3260110
http://users.ics.tkk.fi/jhollmen, e-mail address@hidden

The file "texinfo_bright_colors.css" follows:

--- cut here --- cut here --- cut here --- cut here  --- cut here ---

/* === === === === === === === === === === === === === === === === ===

   This file: texinfo_bright_colors.css
   Version:   1.0
   Date:      September 13, 2010
   Author:    Jaakko Hollmén, e-mail: address@hidden

   The purpose of this cascading style sheet (CSS) style file named
   "texinfo_bright_colors.css" is to introduce several bright and
   contrasting colors for the structural elements of an HTML file.
   The primary focus of the CSS style is to observe the sturucture
   of HTML files created with Texinfo documentation system, more
   specifically texi2html.

   This is NOT a presentation style but a visualization of the
   structure of an HTML file through coloring of the elements.
   The style file may turn out to be useful for both developers of the
   HTML outputting tools and the Texinfo documentation writers who
   are interested to observe the outputted HTML structure.

   The coloring has been achieved by associating a background-color
   to important HTML elements. Minimal formatting has been done,
   although the body font and the headers h1 to h5 have been given
   absolute sizes, and some expanded space has been introduced to
   horizontal rulers hr in order to make them more visible. There
   are margins around the document resembling a book-like presentation
   in the browser.

   This Cascading Style Sheet (CSS) confroms to the CSS standard,
   level 2.1. You can validate the correctness of your own
   creation or modification of the current CSS style at the Web
   address: http://jigsaw.w3.org/css-validator/ by one the three
   input methods available.

   If you edit your already produced HTML file generated by hand,
   change the section <style>...</style> with

   <link rel="stylesheet" href="./texinfo_bright_colors.css">

   and put the CSS file in the same directory, or simply by
   inclusion of the css file when compiling:

   texi2dvi --css-include=texinfo_bright_colors.css my_doc.texi

   Note: The output will be very "colorful", with very, very bright
         colors. You have been warned.

   --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

   (c) Copyright, Jaakko Hollmén, Finland, address@hidden
       September, 2010

   The current file "texinfo_bright_colors.css" is free software:
   you can redistribute it and/or modify it under the terms of the
   GNU General Public License as published by the Free Software
   Foundation, either version 3 of the License, or (at your option)
   any later version.

   The current file "texinfo_bright_colors.css" is distributed in
   the hope that it will be useful, but WITHOUT ANY WARRANTY;
   without even the implied warranty of MERCHANTABILITY or FITNESS
   FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
   more details.

   === === === === === === === === === === === === === === === === */

body {
margin: 30px 10% 30px 8%;
background-color: white;
font-family: Georgia, Palatino, "Times New Roman", Times, serif;
font-size: 1.0em;
}

h1 {
font-size: 2.4em;
background-color: #FF0000;
}

h2 {
font-size: 2.0em;
background-color: #FF0066;
}

h3 {
font-size: 1.8em;
background-color: #FF00CC;
}

h4 {
font-size: 1.6em;
background-color: #FF33FF;
;
}

h5 {
font-size: 1.4em;
background-color: #FF99FF;
}

p {
background-color: #B0B0B0;
}

blockquote {
background-color: #FFCCFF;
}

div.shortcontents {
background-color: #FF9900;
}

div.contents {
background-color: #FF9900;
}

div.defun {
background-color: #FF9900;
}

div.float {
background-color: #FF9900;
}

div.footnote {
background-color: #FF9900;
}

div.node {
background-color: #FF9900;
}

ul {
background-color: #FF9900;
}

ol {
background-color: #CCFF33;
}

table {
background-color: #FFFF00;
}

tr {
background-color: #66FF00;
}

td {
background-color: #66CC00;
}

dl {
background-color: #00FF00;
}

dt {
background-color: #66CC00;
}

dd {
background-color: #00FFFF;
}

pre.display {
background-color: #33CCFF;
}

pre.smalldisplay {
background-color: #33CCFF;
}

pre.example {
background-color: #33CCFF;
}

pre.smallexample {
background-color: #33CCFF;
}

pre.format {
background-color: #33CCFF;
}

pre.smallformat {
background-color: #33CCFF;
}

pre.lisp {
background-color: #33CCFF;
}

pre.smalllisp {
background-color: #33CCFF;
}

pre.sp {
background-color: #33CCFF;
}

pre.verbatim {
background-color: #33CCFF;
}

code {
background-color: #00FF00;
}

hr {
background-color: #0000FF;
margin: 0.5em;
padding: 0.5em;
}

--- cut here --- cut here --- cut here --- cut here  --- cut here ---