Ted's Computer World HTML & CSS
Tips and Tricks

THE MASTER CSS FILE

Extolling the virtues of an all-purpose CSS file should not even be necessary, because its usefulness is so obvious.  I mention the topic at all only because there are countless websites out there that inexplicably are not utilizing such an incredibly valuable tool, together with lower-level CSS files to handle specific groupings of pages.

Kudos to you for already having such a file in place at the top of your own website.  I call mine ALL.CSS for the obvious reasons — it is connected to virtually all of my pages, and its name is self-explanatory.  Yours might be named MASTER.CSS, or GOD.CSS, or some other tricky designation; it doesn't matter, as long as you have one.

In subsequent articles I reference ALL.CSS for making additions and adjustments.  All entries are of course just suggestions that may or may not suit your coding style or be pertinent to the content of your own pages.  Just to get us started, though, this is a partial listing from my own master stylesheet:

*

[HTML]  When I started coding web pages, a 1024×768 monitor was standard; so my pages were written to accommodate that screen resolution.  The modern proliferation of wide monitors sometimes wreaked havoc with certain pages, especially those displaying side-by-side graphics.  Rather than re-write countless pages in an attempt to make them look better, my solution was simply to set a maximum width for all pages.

This means that viewers with 1028px monitors don't have to scroll around in order to see what is on a page; it's all there.  Viewers with wide screens can use [CTRL ±] to adjust text sizes as desired.  The line-wrap function is properly enabled everywhere, so that text doesn't look stupid if the screen font-size is changed.

A hard-coded designation of page-width has other benefits as well.  Now anything with a width property can be referenced in pixels rather than percentages — a desirable feature.  The value 960 is readily factorable, and it allows space for vertical scroll bars on a 1028px screen.

[BODY]  Sans-serif fonts such as Arial and Verdana are more easily readable on computer screens than are serif fonts such as Times New Roman, which are better-suited to printed pages.  My default font is Verdana, because its characters and spacing are a bit wider than those of most other fonts, making it more inherently readable.

Also, Verdana is automatically installed on every Windows system.  There are many other fonts that I would love to use; but they aren't available on all computers.  I also utilize Arial, Comic Sans, and Courier New, because they similarly are always installed in Windows setups.

Perhaps I'm the only one; but I don't like anything hugging the top of the screen, touching the browser menus.  Now I don't have to worry about it, because there is a built-in top margin.

[IMG]  In retrospect, I might have more efficiently set the default to include a border, because that is what is used on most of my graphics displays.  This way, however, I don't have to make concessions to such things as Unicode characters or the Back-Arrow icons at the bottom of most pages.

[TABLE]  Font sizes are kept consistent, and by default the table is centered horizontally.

[A]  I don't want link references to be underlined, as that feature can serve to clutter the appearance of a page.  Having links stand out in different colors is sufficient.  The default colors are changed on certain menus in order to accommodate different background schemes.


Those are not the only tags referenced in my ALL.CSS (more about that later).  Adjustments to such things as image borders and link colors can be made at a lower level; that's what cascading is for.  This document has another incredibly valuable function, however, as a library of classlets, or 'atoms' as some call them.  Properly handled, these classes have appropriately mnemonic designations — that is, ones that unambiguously describe their precise functions.

An atom is, by definition, sufficiently uncomplex that it never would be changed; indeed, the possibility of doing so would defeat its purpose.  This means that atoms can be used anywhere, anytime, knowing that maintenance of these items need never become an issue.  Judicious usage of atoms can save a great deal of time, effort, and mental strain, by cleaning up one's pages and by eliminating duplication of content, 'spaghetti divs', and the necessity of inline styles.  Also, they are easy to type!

[.ctr]  One of the most useful HTML tags of all, <center>, has long been deprecated; yet not only was it ultra-handy, but it eliminated the necessity of using a <div> just to center a block element.  The simple days are long gone, however; so this class takes its place, and it is the most frequently used such item in my collection.

[.wspre]  This comes in handy in situations where it is desired that extra spaces actually count as spaces.

[.strike]  Replaces a tag that has been assigned the task of displaying strikeout-text.  More about that later.


Many other useful classes will be discussed on subsequent pages.

Go Back