Craig Zacker - Author, Editor, Networker

10 Minute Guide to HTML Style Sheets

10 Minute Guide to
HTML Style Sheets

by Craig Zacker

Published in February 1997 by Que Corporation

Previous Table of Contents Next


LESSON 20
Cascading Style Precedence

In this lesson, you learn how to mix style types effectively by examining the relationship between linked, embedded, and inline styles in the same document.

There are many scenarios in which you might want to create web pages that use a combination of linked, embedded, and inline styles. For example, you might have a collection of styles that reflect the overall look of your web site, but you want to override them in certain circumstances. Because modifying the style sheet would affect other documents as well, it is preferable to code your exceptions using embedded or inline styles.

In such situations, you will inevitably have style rules that conflict. A linked style sheet and an embedded style block may both have rules for the <P> tag, which specify different values for the same property.

The CSS1 standard’s general rule is: Linked styles are overridden by embedded styles and embedded styles are overridden by inline styles. This is known as the system of cascading styles.


Explorer Support Internet Explorer 3.0 violates the most basic concept of cascading styles by allowing linked style sheets to retain precedence over embedded styles. Inline styles, however, do override linked ones.

This can easily be demonstrated by taking your SAMPLE2.HTML file (shown following), and adding some inline styles to the body of the document. The values of the inline properties override those specified in either embedded or linked styles.

<HTML>
<HEAD>
<STYLE>
<!--
BODY     {font-size: 11pt;
          margin-left: 0in;
          background: black}

TD          {background: URL(\windows\Black Thatch.bmp)}

H2       {font-size: 24pt;
          font-family: Arial;
          text-align: center;
          color: red}

P        {font-family: Verdana;
          font-size: 14pt
          margin-left: .1in;
          margin-right: .1in;
          color: white}

.first   {margin-right: 50%;
          line-height: 16pt;
          text-align: right}

.second  {margin-left: 50%;
          line-height: 16pt;
          text-align: left}

.third   {margin-left: 25%;
          margin-right: 25%;
          line-height: 16pt;
          text-align: center}
-->
</STYLE>
</HEAD>
<BODY>
<CENTER>
<TABLE WIDTH=90% BORDER=none>
<TD>
<H2>HTML Style Sheets</H2>
<P CLASS=first>HTML style sheets are innovative primarily in
that they allow various different styles to be applied to web
pages by the author. Indeed, it could be said that all web
browsers already use a style to display text.</P>
<P CLASS=second>A style is simply a collection of text and
layout attributes that can be selectively applied to all or
part of a document. The idea of grouping them into a style
allows the author to easily apply the same collection of
attributes to many different parts of a document.</P>
<P CLASS=third>The HTML styles</SPAN> in Microsoft's Internet
Explorer 3.0 are based on a draft standard being developed by
the World Wide Web Consortium (W3C).</P>
</TD>
</TABLE>
</CENTER>
</BODY>
</HTML>

If, for example, you modify the <P CLASS=first> tag in the body of the document to read <P CLASS=first STYLE="font-size: 18pt">, the 14-point text defined in the embedded style for the <P> selector (shown in Figure 20.1) is replaced with the 18-point text shown in Figure 20.2.


Figure 20.1  Properties defined in embedded style blocks modify the appearance of all the elements to which they are applied.


Figure 20.2  Properties included in specific HTML tags as inline styles affect only that element, and override the embedded properties.

Notice, however, that while the text is displayed using the larger font size, the other properties included in the same embedded declaration remain in force. The inclusion of the STYLE= attribute in an HTML tag does not override the entire embedded rule for that tag, only the specific properties that are defined inline.

Assigning Rule Priority

Apart from the three style types, you must consider the relationship between the author and the reader. In the future, it will be possible for readers to maintain personal style sheets that accommodate their own special needs. The general rule is that authors’ styles take precedence over readers’ styles that take precedence over the styles set in the browser.

There definitely are times when exceptions to this rule must be allowed, such as when a reader uses a style to provide large type or speech synthesis to compensate for a handicap.

The CSS1 standard calls for the use of a priority flag for this purpose. All rules are assigned a normal priority by default, but when a declaration is modified by the addition of an exclamation point and a priority indicator as shown, its default changes.

P     {font-size: 24pt ! important}

This priority rule will be used instead of any normal priority rule for the <P> tag, even in cases where it would be overridden under other circumstances. Thus, a person with vision difficulties could include rules of this type in a personal style sheet and have them take precedence over the authors’ styles that are supplied with web pages.


Understanding Rule Precedence

The cascading precedence is more complex than the basic relationship between linked, embedded, and inline styles. The CSS1 standard defines an algorithm which accounts for all of the factors discussed earlier and assigns them relative priorities.

To determine which rule for a particular selector should be applied when conflicts exist, examine the following conditions in the order in which they are listed:

  Priority Rules assigned an important priority always take precedence over those with normal priority.
  Style Origin An author’s styles take precedence over the reader’s styles, which take precedence over the browser’s internal styles.
  Style Type Inline styles take precedence over embedded styles, which take precedence over linked styles.
  Specificity Selectors that are more specific take precedence over those that are more general. Specificity is computed by assigning a 3-digit number to each selector composed of the number of ID attributes in the selector (first digit), the number of classes in the selector (second digit), and the number of tag names in the selector (third digit). The selector with the highest number is awarded precedence. For example, a linked style using a simple class selector would have a value of 010. If an embedded style was defined for that same element using an ID selector, its value would be 100. The embedded style would therefore take precedence.
  Style Order All other factors being equal, the rule specified last should take precedence.

This algorithm takes factors into account that do not apply to the practical applications of HTML style sheets as they stand today. The Cascading Style Sheets document is still a draft standard. A good deal of work has to be done before the standard is complete and even more before it is realized in commercial products that make all of the standard’s potential a reality.

The time factor for standards developments, however, has taken a radically different turn in the last two years. Standards that at one time would require years of study and refinement are now being completed in a matter of months. Product cycles for Internet related technologies have accelerated enormously to the point that testing of new versions begins almost immediately after the release of the old ones.

In less than a year, style sheets will be part of a browser’s standard equipment. In the future, the use of styles will not be an optional feature, so the time to begin learning their intricacies is now.