8.6.2.1. The pros and cons of external styles

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 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, remember to include only those styles that are common to the pages using the sheet. If a set of styles is needed only for one or two sheets, you are better off isolating them in a separate sheet or adding them to a document 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

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 will pay off in the long run when it is time to change your styles.

8.6.2.3. The pros and cons of inline styles

Any time you use an inline style, think long and hard as to 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">