|
by Robert Crooks
Editor's Note: To view samples of the approach described
in this article, view the source of the page (search for
<style>).
Lots of web site and web application developers
out there know that it's time to start using Cascading Style
Sheets. The HTML 4.0 specification officially deprecates
most physical formatting tags, recommending the use of CSS
instead. The buzz from W3C land is that HTML 5.0 will probably
enforce the separation of style and structure in the interest
of making HTML completely XML-compliant.
CSS Basics
If you are one of those developers who's
been meaning to employ CSS but hasn't quite gotten around
to it, two bits of good news:
- CSS won't do any harm in older
browsers that don't support it. They just won't render
the style effects. And the result may not be as bad as
you'd think, because using CSS will encourage you to exploit
the structure that's built-in to HTML more consistently...and
an ounce of structure is worth a pound of formatting.
- CSS is easy to learn -- easier
than HTML, because the syntax is very simple and consistent.
Here's the basic CSS syntax:
Selector {
property1 : value;
property2 : value;
...
}
Example:
H1 {
font-family : sans-serif;
font-size : 18pt;
color : #990000;
}
Result:
Styled H1 Heading
Note the curly brackets surrounding
the property list, the full colon separating the style property
from its value, and also the semi-colons that separate the
various properties. A semi-colon after the last property
in the list is optional.
If you know this syntax, what properties
and values you can use, and what you can use as selectors,
you're ready to use style sheets. For tables of properties
and values, see my more elaborate introduction
to CSS (there are many other good resources on the Web
as well, several listed in our Developers
section references). There are also several CSS editors
available to make creating style sheets easier. HomeSite
3.0 (or Cold Fusion Studio 3.1) includes a CSS Wizard, and
the 4.0 version will include a full-blown CSS editor.
Selectors can be of three types:
- HTML tags (BODY, P, TABLE,
etc.)
- Classes, which may be tied
to particular tags (P.blue) or independent and therefore
applied to any tag (.blue, which can be referenced in
an HTML page as <p class="blue">); the
class attribute in the HTML is required to apply the class
style regardless of whether the class is limited to a
single tag or not.
- IDs (#red, which should be
referenced by one tag as <p id="red">
-- IDs are intended to identify particular tags for such
purposes as DHTML scripting).
Note that both the class
and ID selectors must begin with special symbols: a period
for classes and a # sign for IDs; the period
and # are not included when the styles are referenced
through the class or ID attribute.
Example:
In the style sheet:
#tag32 {
...
}
.majorHeading {
...
}
In the HTML page:
<h2 class="majorHeading" id="tag32">...</h2>
There are lots of other technical details
involved in CSS, but the only one of consequence for basic
CSS use is inheritance. Inheritance means
that child elements inherit many -- but not all
-- of the style properties defined for their parents, unless
their own style properties override those of the parent.
For instance, if you define the font color for paragraphs
as "#000066," a <STRONG> tag inside the
paragraph would have the same font color unless its own
style properties specified a different one. Similarly, a
paragraph with a class value would have all the
style properties of a normal paragraph except those the
class overrode or added.
To apply styles to an HTML page, you can
use a linked CSS file, embedded styles, or inline styles.
In the interest of keeping it simple, here I will only describe
the linking method, which is the best choice in most cases.
To link your style sheet to a page, simply include a LINK
tag in the HEAD section of the HTML file, like this:
<link rel="STYLESHEET" type="text/css" href="sample.css">
Linking style sheets to HTML files in
HomeSite 3.0 is easy. Simply drag the CSS file into the
document you want to link it to; when you release it, choose
Insert as Link from the menu that pops
up. In HomeSite 4.0, you can link the CSS file by right-clicking
on the CSS file name in the Files tab of the resources and
choosing Insert as Link, or you can use
a link wizard in the Style Editor to link a CSS file to
a whole list of HTML files all at once.
Using CSS Effectively
Now you have the basic concepts you need
to write style sheets, but you know that like any other
technology, CSS can be used in better and worse ways. CSS
is too young yet to produce any definitive rules for effective
use, but here are some guidelines formulated on the basis
of my own experience and observation of how others are using
styles:
- Don't get carried away. The enormous
formatting flexibility you gain through CSS will tempt
you to start changing font faces, colors, margins, and
so forth at every opportunity. The effects may be spectacular,
but spectacles don't always communicate information effectively.
Regardless of how you format documents, you should change
the appearance of a block of information only when you
want to signal the user that this is a different kind
of information from that contained in other block.
- Don't use styling as a substitute
for document structuring. With CSS, you could easily create
rich documents using nothing but DIV and SPAN tags with
an assortment of classes. But remember that the point
of separating style and structure is that HTML elements
are freed up to do the work they were intended to do:
detail the logical structure of the information through
the appropriate use of multi-level headings, paragraphs,
block quotes, etc. Aside from the principle, though, think
of the effect of structureless documents when they are
viewed in browsers that don't support CSS. A well-structured
page, on the other hand, will often look better in the
older browsers than many of the font-tag-riddled documents
prevalent on today's Web.
- Apply minimal formatting to specific
HTML elements. I rarely apply any properties to HTML tags
other than the font-family, and perhaps the font size.
Reserving more elaborate properties for classes gives
you more flexibility in applying specific styles to specific
kinds of information. (See the next point...)
- Use class names to describe the
information that the classes will be applied to -- .sectionTitle,
.productDescription, and so forth. Applied rigorously,
this practice enables HTML plus CSS to approach the condition
of SGML and XML, namely self-describing documents which
lend themselves readily to manipulation by a variety of
processing programs. Apart from that, your sites will
be easier to maintain, because layout and formatting changes
will be made in the style sheet, and you will know without
digging through every page how the styles are used.
Ideally then, every element inside a body
will have one -- and only one -- attribute: a class
that both describes the nature of the information and
provides the style specification.
To see of sample of my approach in action,
view the source of the page. I've embedded the styles in
the HEAD section of the document (normally I would use a
separate linked CSS file), and used class names in the way
suggested above.
Conclusion
Basic style sheets are not difficult to
build and use. In fact, you may find that the greater part
of the work lies in restructuring your HTML files and eliminating
HTML formatting tags you no longer need. This will be time
well spent, though, because the result will be documents
that conform more closely to HTML 4.0 standards, and more
important, a sites that are much easier to maintain and
update.
For more information on using CSS and
how CSS works, be sure to Nate Zelnick's Allaire Alive title
on Understanding
Cascading Style Sheets also.
And happy styling....
-Robert
Robert Crooks is an Allaire Certified Instructor at
Allaire Corp. Please direct comments on this column to talkback@allaire.com.
|
