|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,
lower-level CSS files to handle specific groupings
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 began 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
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 1024px 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
to adjust text sizes as desired. The line-wrap function
is properly enabled everywhere, so that the text-formatting
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
percentages — a desirable feature.
The value 960 is readily factorable, and it allows space for vertical
scroll bars on a 1024px screen; so that's what I use.
[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
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
[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 standing 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
(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
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.
(Note: a <div> still is required to center a block
[.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
Many other useful classes will be discussed on subsequent pages.