| | |
There are three main types of cascading style sheets: linked, embedded, and inline.
Linked style sheets are the preferred form of style sheet. An external ASCII/plain-text document (named with the ".css" file name extension) contains the style sheet information. This external text-only document is linked to the HEAD of an HTML page using the LINK tag. A single external style sheet may be linked to as many HTML pages as you wish, and changes made to this external linked style sheet will automatically be reflected on every HTML page linked to it (a tremendous convenience).
Embedded style sheets use CSS declarations placed within a STYLE tag in the HEAD of a particular HTML page. Because this embedded style information is inside of the HEAD of one HTML page, it affects only the appearance of tags on that HTML page, and can not be applied to any other HTML pages. In every other respect, however, embedded style sheets use the same basic CSS syntax as external linked style sheets (redefining the appearance of HTML tags).
Inline style sheets place style information in a SPAN tag inside the BODY of an HTML page, and are used in much the same way as the old FONT tag. Inline style sheets are the least flexible of all style sheets, and have all of the inconvenience of the old FONT tag (although with more control and power). Inline style sheets apply to only one single element inside the BODY of an HTML page (the SPAN tag), and must all be changed individually when a change to the look-and-feel of the site is proposed. Inline style sheets can only use a limited portion of basic CSS syntax; they do not affect HTML tags on a page as a whole, they merely affect whatever is marked by their particular SPAN tag.
In general, use linked style sheets whenever possible; they are the most flexible, the most portable, the most convenient style sheet. If you are creating only one HTML page that uses CSS, an embedded style sheet may be appropriate. Inline style sheets are only useful if you do not have access to the HEAD of the HTML page in question. In other words, if you are adding information to the BODY of an HTML page through some web-based mechanism but cannot affect the HEAD of that page, you might find inline style sheets helpful. Otherwise, you will probably never want to use inline style sheets.
As you may have gathered, more than one style sheet can potentially be applied to a given HTML page at a time. When two or more style sheets are in conflict (referring to the same properties of the same tag), this conflict must be resolved. Conflict resolution in style sheets is called the "cascade".
I am not going to go into details about the cascade; it is a very involved topic. In general, however, the cascade is resolved by the specificity of the style sheet in question. Remember the following rules:
Style information in a linked style sheet overrides the web browser's default appearance settings.
Style information in an embedded style sheet overrides the web browser's default appearance settings, as well as any linked style sheet information attached to that HTML page.
Inline style sheets override the web browser's default appearance settings, as well as both linked and embedded style sheets attached to that HTML page.
In order of specificity (most specific to least specific):
If you attach multiple style sheets to a single HTML page, you are going to run into inconsistencies and problems in the way different browsers handle the cascade almost immediately. Web browsers are inconsistent in the way they handle CSS in general, even the same browser on different platforms, or different versions of the same browser. Whenever possible, you should AVOID the cascade entirely; try not to use multiple style sheets on a single HTML page.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.