CSS Simplifies Your Life Part(II)

There's Never Enough CSS in Your Life

The HTML4 specification states that CSS can be written inline or specified as an external file. Inline CSS may be located in the HEAD of a document, or it may be used as a part of a tag, such as

<H2 style="color:blue">

If you're using MSIE this text will be blue

</H2>

Styles which are defined within a tag are supposed to override any style which is defined in the header or in an external style sheet. This works fine in MSIE4, but if you're using Netscape 4 to view this page, then you can see that the original style has not been overridden. Hopefully Netscape will get a little closer to the specification with the next release of Navigator.

Here is the Style Sheet which is linked to this page:

A:link { background: white; color: blue; text-decoration: none; }

A:visited { background: white; color: blue; text-decoration: none; }

A:active { background: white; color: blue; text-decoration: none; }

BODY {background:#FFFFF;color:#000000;margin:.02in .02in .10in;}

H2 {font:17pt Verdana, Arial;color:#A00000;font-weight:bold;}

H4 {font:12pt Verdana, Arial;color:#888888;font-weight:bold;font-style:italic;}

H5 {font:8pt Verdana, Arial;color:#000000;font-weight:bold;}

P {margin-left: .02in;}

P.intro{font:15pt Arial;color:#A00000;font-weight:bold;}

PRE {font:12pt Times New Roman;font-style:italic;}

B {font: 13pt Arial;font-weight:bold;}

TD {font: 13pt Arial;}

(Realize that the style for each element may be displayed on one line, as they are above, or they may be displayed on several lines, as in the example below. This is simply a matter of preference.)

H4 {

font:12pt Verdana, Arial;

color:#888888;

font-weight:bold;

font-style:italic;

}

One of the problems with using inline Style Sheets is that they somewhat defeat the purpose of using Style Sheets; namely that you aren't separating the style from the data. Any style sheet can be defined in an external file. You simply omit the STYLE tags and save the Style Sheet in a file ending in extension .css. The file is called from the header using a relative link in much the same manner as external JavaScript files:

<link rel=stylesheet href="wdstyle.css" type="text/css"> 

Style Sheets may also be used to define style classes. These classes may be used to manipulate and position your HTML "elements" anywhere on the page.

From Webdeveloper.com