web blazonry web development scripts and tutorials Get best price on Unlocked Moto G Power
   PHP       Name Generators       Perl       CSS       Javascript       Java       MySql       How Tos       Resources   

CSS Home



CSS Tutorial
  Introduction
  Getting Started
  The Basics
  Margins
  Fonts and Text
  Backgrounds
  Miscellaneous
  Tips and Tricks
  Problems & Compatibility
  Examples
  CSS Reference Guide

Bookmark and Share




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>

 

Next >>

 

Newest Pages
Test Google Ads Ver. 2
Free Linux Admin Books
Free Linux Books for Programmers
Free Books for Linux on the Desktop
Free PHP Books
Free JavaScript Books
Free Java Books - Advanced
Free Java Books - Basic
Free Perl Books
Free Python Books
Quote of the Day (PHP)
Debugging Part 2
How to Test Google Ads
Most Popular Pages
Baby Name Generator
U.S. Name Generator
Wu Name Generator
Popup Windows (JavaScript)
Upload and Resize an Image (PHP)
How To Install Apache + PHP + MySQL
Intro to Web Databases (PHP, MySQL)

Least Popular Pages
iNews Applet (Java)
Java Resources
Site Monitor (Perl)
PHP Resources
 
 

  privacy policy     ||     © 1997-2016. astonishinc.com   All Rights Reserved.