CSS Tutorial: Tricks and Tips
Think About Non-CSS Browsers
Fortunately, the passage of time has pretty much taken care of this issue as the majority of browsers support CSS.
One very nice thing about style sheets, if used properly non-css compliant browsers will still display formatted content, somewhat. Of course it will not be as nice and fancy as a CSS browser, but something will still show, and no error messages. By far the most annoying aspect of JavaScripts. You cannot sneak an error by there.
You can let the non-css browsers know that you are using style sheets. A good way of doing this is using the display: none command. I have done that on some of my pages, if it shows up than you are not fully css-compliant.
Example:
.inviso { display: none; }
<p class="inviso"> this page uses style sheets,
you are missing out.</p>
Also when you are formatting your page try to format in such a way that non-CSS browsers will still maintain some formatting, such as using headers. Using appropiate headers in their appropiate spots will still enlarge, and bold font when appropiate. The non-CSS browser will not show the font or color or alignment you assigned but it will still show some formatting.
Only using SPAN and DIV will not show any special formatting to non-CSS browsers.
Fancy Text
You can create fancy titles and text effects using just style sheets.
Here an example of a title with a box around the first letter. A nice effect without
requiring an image.
Example:
<STYLE TYPE="text/css">
.intro1 { color: white;
background: #333399;
font-size: 36pt; }
.intro2 { color: #333399;
font-size: 26pt; }
</STYLE>
<H1><SPAN CLASS=intro1>i</SPAN>
<SPAN CLASS=intro2>ntroduction</SPAN></H1>
This displays:
introduction
H1 tags were used around to so non-CSS browsers will still see a header type tag,
just not the coloring or box.
Boxes with Border Lines
The left hand navigation boxes I have on blazonry.com use style sheets instead of
complicated tables to draw the one pixel box. An example is the navigation on the
top left of this page. The style sheet code to do this is:
<STYLE TYPE="text/css">
.box175 {
width: 175px;
border: 1px solid #000099;
padding: 4px;
}
</STYLE>
<div class="box175">
Content
more content
etc...
</DIV>
|