Section 8.6. Applying Styles to Documents


8.6. Applying Styles to Documents

You should consider several issues 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; you can achieve most of them, 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 also 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 stylesheets for your documents, we realize that creating stylesheets is an investment of time and energy that pays off only in the long run. Designing a stylesheet for a one- or two-page document is probably not time effective, particularly if you won't be reusing the stylesheet for any other documents. In general, however, we believe the choice is not if you should use CSS2 stylesheets, but when .

8.6.2. Which Type of Stylesheet, and When

Once you have decided to use cascading stylesheets (for pain or pleasure ), the next question is which type of stylesheetinline, document level, or externalyou 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 stylesheets provide consistency in the presentation of your documents, external stylesheets are the best and easiest way to manage styles for your entire document collection. Simply place the desired style rules in a stylesheet, and apply those styles to the desired documents. Because all of the documents are affected by a single stylesheet, conversion of the entire collection to a new style is as simple as changing a single rule in the corresponding external stylesheet.

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 stylesheets 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 stylesheets, so you might as well learn to like it. Like conventional HTML documents, it is not possible to encrypt or otherwise hide your stylesheets so that others cannot view and use them.

The biggest problem with external stylesheets 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, but it must also download the stylesheet before the page can be displayed to the user . While most stylesheets are relatively small, their existence can definitely be felt when accessing the Web over a slow connection.

Without appropriate discipline, external stylesheets can become large and unwieldy. When creating stylesheets, 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 stylesheets. By adding and changing rules using document-level styles, you eliminate the risk of adding a broken style to your stylesheets, 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 stylesheet 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 stylesheet 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. You cannot reuse inline styles, 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?)

Anytime you use an inline style, think long and hard about whether you might accomplish the same effect 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> 

rather than:

 <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.



HTML & XHTML(c) The definitive guide
Data Networks: Routing, Security, and Performance Optimization
ISBN: 596527322
EAN: 2147483647
Year: 2004
Pages: 189
Authors: Tony Kenyon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net