Cascading Style Sheets as Used on GeodSoft.com

How GeodSoft uses Cascading Style Sheets to standardize the appearance of common HTML elements on its own site. Due to contemporary browser incompatibilities, only limited use is made of CSS at this time.

The GeodSoft style sheet is pretty basic. It starts with.

BODY {background: rgb(0,51,153); color: rgb(0,0,102);}
TD {color: rgb(0,0,102)}

The BODY element sets default background and type colors. Setting the TD color (text) to the same as the in the BODY, causes Netscape to display text inside of table cells as the same color as used elsewhere. If this item is removed, Netscape typically shows nearly all text as black, since nearly all text in GeodSoft.com pages are in multiple nested tables. Other browsers display table text in the same color as the body text if they have no more specific style instructions.

Next are a series of entries setting the appearance of headings throughout the GeodSoft.com site.

H1 {font-size:140%}
H1 {font-family: Helvetica, Arial, sans-serif}
H1 {font-weight:bold}
H1 {color:rgb(0,0,51)}

For each heading size (1 - 6) there are four lines and four attributes. All attributes could be combined into one line but if there is any mistake or an item Netscape does not understand, it tends to drop the entire style. The most important feature regarding the headings are the sizes which range from 140% down to 105% from <H1> to <H6>. The standard Heading size spread is way to wide. <H1> is virtually unusable because it's simple too big at its default display size. On the other hand <H6> is smaller than the default text type size. Changing the size range allows headings to be used as they should with H1 for the most important topics on the site with each lower level heading being less important. All are still larger than body text and further set off from body text by being a sans serif face where the default body text face is serif (Roman), bold and a darker blue (almost black) than the body text color.

H1 {margin-left:.5em; margin-right:.5em}

I recently (mid September) added the new margin settings for headers. I happened to notice that one page title (at a particular browser window size) was running right to both edges of the white content area. This was ugly and I immediately thought of style sheets. At first I added a 1em margin and immediately every header on the site was indenting rather than running flush to the margins. After looking at this for a few days I decided that the lower level headers that had been flush left were not offset enough from the standard 2em paragraph indent. I tried .5em which seemed just right. There was visible white space between the headers and table cell border but they were also very distinct from the indented paragraphs. Someday all the browsers will really support style sheets and many site wide changes will become a snap (assuming your site has and sticks to standards) and not require the nearly as much of the custom programming that I do in my maintenance scripts.

The final elements in the style sheet are paragraph entries:

P.indent1 {margin-left:2em; margin-right:2em} P.indent3 {margin-left:3em; margin-right:3em} P.indent4 {margin-left:4em; margin-right:4em}

Wherever a <P class="indent1"> tag is used, the paragraph started by that tag will be indented on both the left and right by two em's; the actual margin seems to be somewhat more. Em's were selected because they scale with the type. Using <P class=indent1> consistently on the paragraphs in the main content area of each GeodSoft page provide a consistent margin throughout the site that could be changed at any time by simply making two tiny changes in /root.css. This also makes it particularly easy to out dent the inner page headings without using any additional HTML code.

The paragraph style names are not consistent as "indent1" was the only indent that I used for about a year and a half. Eventually I realized that using <blockquote> and other gimmicks to control successive levels of indent made no sense as the amount of indent did not relate to the standard indent set by "indent1". It was much simpler to directly control additional indent with additional paragraph styles but it took a long time to realize that. By then "indent1" was embedded in hundreds of pages and changing the name to "indent2" didn't seem worth the work and potential problems.

For GeodSoft.com in 2000, I have chosen a minimal set of Cascading Style Sheet features that are implemented in a similar manner accross widely deployed browsers. I have stayed with the traditional tables, font sizes and width specifications for most of my visual appearance control, despite the World Wide Web Consortium's recommendations against such practices. Because the GeodSoft.com sites are almost entirely script generated, it should be a simple matter to adopt more up-to-date coding practices when they are more widely supported by browsers.

Hopefully readers have noticed that my use of width is not used the way a graphics designer is likely to use it. I do not try to force a fixed size and proportion on web pages. Rather, I use width controls to minimize scrolling and improve readability. Most of the GeodSoft pages are actually useable in a 400 x 400 pixel browser window with Netscape on Linux. If a browser window is very large, the text column is held to a maximum of 600 pixels so lines do not get too long to read. As the window shrinks the text column compresses to a point comparable to a newspaper column width and then shrinks no more. When the contents no longer fit the browser window, its the standard navigation aids that are pushed out of site first, not the unique content that is presumably the reason the reader is on the page. Some pages that have larger fixed width elements, such as the sample site, do not behave as described but it's still the standard components that disappear first.

Given the state of browsers today, I do not believe it is possible to follow the W3C latest recommended standards, HTML 4.01 and create a reasonably complex page that displays properly in any existing browser, let alone consistently in multiple browsers. Too many elements and attributes that many existing browsers depend on are deprecated. Specifically the <FONT> element as well as the <TD> height and width attributes are deprecated. Bgcolor is deprecated for all the elements. Many existing browsers simply don't support style sheets well enough to allow adequate control of the visual characteristics that these elements and attributes control.

As the graphics at the top of this page and the main style sheet page show, these pages do validate to correct HTML 4.00 and that the style sheets are valid as well. GeodSoft pages get excellent ratings from both Web Site Garage and Net Mechanic, for HTML and browser compatibility.

Top of Page - Site Map

Copyright © 2000 - 2014 by George Shaffer. This material may be distributed only subject to the terms and conditions set forth in http://GeodSoft.com/terms.htm (or http://GeodSoft.com/cgi-bin/terms.pl). These terms are subject to change. Distribution is subject to the current terms, or at the choice of the distributor, those in an earlier, digitally signed electronic copy of http://GeodSoft.com/terms.htm (or cgi-bin/terms.pl) from the time of the distribution. Distribution of substantively modified versions of GeodSoft content is prohibited without the explicit written permission of George Shaffer. Distribution of the work or derivatives of the work, in whole or in part, for commercial purposes is prohibited unless prior written permission is obtained from George Shaffer. Distribution in accordance with these terms, for unrestricted and uncompensated public access, non profit, or internal company use is allowed.