Just because Web sites are easy to build these days, that doesn't mean it's easy to build a quality Web site that meets your business objectives. Before developing your next Web site, or redesigning an existing site, download this Internet.com eBook to guide you through the process and plan your project, whether you're developing a site in-house or outsourcing the project. Register now for your free Internet.com membership to download your complimentary eBook. Membership will also give you access to: eBook library         Whitepapers         Webcasts Newsletters         WinDrivers

CSS Simplifies Your Life
Part 2

by Scott Clark

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

<H3 style="color:blue">

If you're using MSIE
this text will be blue

</H3>

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. For instance, when you move your mouse over this text, you'll see that the paragraph moves down and to the right a bit. To get it back where it started, move your mouse over the "Bring It Back" link below this paragraph.

[ Bring It Back ]