8.6 Applying Styles to Documents
There are several issues you should
consider before, during, and after you use styles in your web
documents and document collections. The first, overarching issue is
whether to use them at all. Frankly, few of the style effects are
unique; most can be achieved, albeit less easily and with much less
consistency, via the physical and content-based style tags (e.g.,
<i> and <em>) and
the various tag attributes (e.g., color and
background).
8.6.1 To Style or Not to Style
We think the CSS2 standard is a winner, not only over
JavaScript-based standards but for the convenience and effectiveness
of all of your markup documents, including HTML, XHTML, and most
other XML-compliant ones. Most browsers in use today support CSS1 and
many of the features of CSS2. The benefits are clear. So, why
wouldn't you use styles?
Although we strongly urge you to learn and use CSS2 style sheets for
your documents, we realize that creating style sheets is an
investment of time and energy that pays off only in the long run.
Designing a style sheet for a one- or two-page document is probably
not time-effective, particularly if you won't be
reusing the style sheet for any other documents. In general, however,
we believe the choice is not if you should use
CSS2 style sheets, but when.
8.6.2 Which Type of Style Sheet and When
Once you have decided to use cascading style sheets (for pain or
pleasure), the next question is which type of style
sheet — inline, document-level, or external — you should
apply, and when. Each has its pros and cons; each is best applied
under certain circumstances.
8.6.2.1 The pros and cons of external styles
Because style sheets provide consistency
in the presentation of your documents, external style sheets are the
best and easiest way to manage styles for your entire document
collection. Simply place the desired style rules in a style sheet,
and apply those styles to the desired documents. Because all of the
documents are affected by a single style sheet, conversion of the
entire collection to a new style is as simple as changing a single
rule in the corresponding external style sheet.
Even in cases where documents may differ in style, it is often
possible to collect a few basic style rules in a single sheet that
can be shared among several otherwise different documents, including:
Background color Background image Font sizes and faces Margins Text alignment
Another benefit of external style sheets is that other web authors
who want to copy your style can easily access that sheet and make
their pages look like yours. Imitation being the sincerest form of
flattery, you should not be troubled when someone elects to emulate
the look and feel of your pages. More to the point, you
can't stop them from linking to your style sheets,
so you might as well learn to like it. Like conventional HTML
documents, it is not possible to encrypt or otherwise hide your style
sheets so that others cannot view and use them.
The biggest problem with external style sheets is that they may
increase the amount of time needed to access a given web page. Not
only must the browser download the page itself, it must also download
the style sheet before the page can be displayed to the user. While
most style sheets are relatively small, their existence can
definitely be felt when accessing the Web over a slow connection.
Without appropriate discipline, external style sheets can become
large and unwieldy. When creating style sheets, include only those
styles that are common to the pages using the sheet. If a set of
styles is needed for only one or two pages, you are better off
isolating them in a separate sheet or adding them to those documents
using document-level styles. Otherwise, you may find yourself
expending an exorbitant amount of effort counteracting the effects of
external styles in many individual documents.
8.6.2.2 The pros and cons of document-level styles
Document-level styles are most useful
when creating custom documents. They let you override one or more
rules in your externally defined style to create a slightly different
document.
You might also want to use document-level styles to experiment with
new style rules before moving them to your style sheets. By adding
and changing rules using document-level styles, you eliminate the
risk of adding a broken style to your style sheets, breaking the
appearance of all the documents that use that sheet.
The biggest problem with document styles is that you may succumb to
using them in lieu of creating a formal, external style sheet to
manage your document collection. It is easy to simply add rules to
each document, cutting and pasting as you create new documents.
Unfortunately, managing a collection of documents with document-level
styles is tedious and error-prone. Even a simple change can result in
hours of editing and potential mistakes.
As a rule of thumb, any style rule that impacts three or more
documents should be moved to a style sheet and applied to those
documents using the <link> tag or
@import at-rule. Adhering to this rule as you
create your document families pays off in the long run when it is
time to change your styles.
8.6.2.3 The pros and cons of inline styles
At the end of the
cascade, inline styles override the more general styles. Get into the
habit now of using inline styles rarely and just for that purpose.
Inline styles cannot be reused, making style management difficult.
Moreover, such changes are spread throughout your documents, making
finding and altering inline styles error-prone.
(That's why we might eschew tag- and attribute-based
styles in the first place, no?)
Any time you use an inline style, think long and hard about whether
the same effect might be accomplished using a style class definition.
For instance, you are better off defining:
<style type="text/css">
<!--
p.centered {text-align: center}
em.blue {color: blue}
-->
</style>
and later using:
<p class=centered>
<em class=blue>
instead of:
<p style="text-align: center">
<em style="color: blue">
Your styles are easier to find and manage and can easily be reused
throughout your documents.
|
