Suitcase Fusion 3 User Guide for Mac OS - Extensis

Cascading
Style rules can be defined in multiple places:
• Inline style sheets are defined in the HTML element tag itself, and apply only to that tag and its children.
• Internal style sheets are defined in the element of an HTML page, and apply to everything on that
page.
• External style sheets are defined in a separate document and can be attached to an HTML page by being
linked to the page in the element. The same external style sheet can be linked to all the pages in
a website, allowing them all to use the same style rules.
• The browser (or user agent) has an internal style sheet for displaying websites that don’t have their own.
Browsers often let their users supply their own style sheet to override its default style rules.
Cascading works in this order:
1. If a tag has an inline style sheet, use that;
2. Otherwise, if a page has an internal style sheet, use that;
3. Otherwise, if a page uses an external style sheet, use that;
4. Otherwise, use the browser’s style sheet.
NOTE: If a page includes both an internal style sheet and an external style sheet, the cascade order follows the
order they are referenced in the HTML document: if the external style sheet is referenced after the internal, its
definitions will have precedence.
If this is a fragment of a page
p { font-size: 10pt; color: green; }
Now is the time for all good men...
to come to the aid of their
party.
and the file mystyles.css contains this rule
p { font-size: 14pt; }
The page will look something like this:
Now is the time for all good men
to come to the aid of their party.
The first paragraph gets its color (green) from the internal style sheet, but the size (14pt) comes from the
external style sheet (since it is referenced last, the size definition here has precedence). The color and size of the
second paragraph are defined inline in the tag and override the other definitions.
Since we didn’t specify a font, this comes from the browser’s default font definition.
It is perfectly legal and reasonable to include more than one external style sheet link in a web page. If this results
in a conflict, the styles defined in the last-linked style sheet have precedence. Similarly, if you have these rules in
a style sheet
p { font-size: 10pt; color: red; }
...
p {font-size: 12pt; }
then your paragraph text will be 12pt and red.
- 77 -