CSS
Ron Graham
with Bliss Sloan
The cascading style sheet (CSS) methodology is an attempt by the Web design community to separate layout from content. Style sheets, correctly used, eliminate the need for such HTML tags as <font>...</font>.

Advantages of CSS in Web design include:

  • Absolute and relative positioning. You can superimpose text over graphics, text over text, graphics over graphics, etc. for potentially stunning visual effects.
  • Animation. Through the joint use of CSS layers (represented by <layer> in Navigator, <div> in MSIE) and JavaScript you can move HTML elements all over a page in real time. (This is referred to as dynamic HTML, or DHTML.)
  • Fine control over text attributes.
  • Redefinition of existing HTML tags.
  • Dynamic fonts. Run automatically on a site visitor's browser.
  • The ability to change many HTML documents simultaneously by editing a single CSS file.
You should be aware of the following:
  • CSS is only supported in newer browsers (e.g. MSIE 3+, Navigator 3+).
  • CSS is only a recommendation and can be interpreted differently by different browsers on different platforms, ignored by some browsers altogether, or overridden by end-users.
  • You can define style sheets inline, e.g.
<style type="text/css">
      h1.header
        { font-size        : 20pt     ;
          font-style       : italic   ;
          font-family      : Arial    ;
          text-align       : center   ;
          color            : green    ; }
    </style>
in the <head> section of your HTML document. You can then get centered green Arial text in the document between <h1 class="header">...</h1>.

Like this.

  • You can define style sheets as linked files, e.g.
    <link rel="stylesheet" href="ron.css" 
      type="text/css">    
in the <head> section of your HTML document. Your entire document would then follow recommendations from file ron.css, depending on where specific tags are positioned. Like this document does.

References

World Wide Web Consortium -- look here for information on the document object model and CSS definitions
http://www.htmlartistry.com -- numerous examples
webreview.com's guide to style sheets
Netscape's introduction to JavaScript styles
style sheet validator from htmlhelp.org
free style sheets and DHTML
the Usenet newsgroup comp.infosystems.www.authoring.stylesheets FAQ


What you can do
  1. Don't depend on your site visitors to use a certain browser or version, or to enable CSS or JavaScript at all. Be certain your content will stand alone without CSS support for its presentation.
  2. If you are going to prepare your own style sheets, test them as much as you can, remembering that Navigator and MSIE do not share a common set of object names. Take advantage of validators as well.

[Table of Contents] [Previous] [Next]