Specifications

- 65 -

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

<html>

<head>

p { font-size: 10pt; color: green; }

</style>

</head>

<body>

<p style="font-size: 24pt; color: red">to come to the aid of their

party.</p>

</body>

</html>

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