The browser’s default styles.
An external style sheet (a .css file containing style definitions that is
referenced from within the HTML document with a Linkelement).
An embedded style sheet (styles defined within the HTML document,
inside its <head>tag. This kind of style is also sometimes called internal).
An inline style (a style defined as an attribute within an HTML element
itself, and whose effect is limited to that element only). For example, this
is a typical inline style:
<p style=”border-bottom: blue”>
This list also illustrates the order in which conflicting styles “win” in any con-
flict. Think of the order as the style closest to the element wins. For example,
the inline style — nestled right inside the element itself — is the closest. So
if more than one style is specified for that element, an inline style is the style
used. This closeness of the style to the element that matches it is more for-
mally known as specificity.
The style location with the second highest priority is the internal style sheet
located in the HTML document’s header. The third highest priority goes to the
external style sheet — the separate file. And the weakest priority, the one that
all the others trump, is the default style. After all, the default is the look that
a style sheet is supposed to alter.
Here’s an example illustrating how IE decides between blue and red colors:
<html>
<head>
<style type=”text/css”>
p {color:red;}
</style>
</head>
<body>
<p style=”color: blue;”>i guess i’m blue. </p>
</body>
</html>
To test this document, type the HTML code into Notepad, and then save it
using the filename EmTest.htm. Load this Web page by double-clicking its file-
name in Windows Explorer. You’ll see the sentence I guess I’m blueappear in
blue. The <p>element here was defined in two conflicting ways. In the
embedded style, it’s defined as red, but that definition is overridden by the
inline definition of the color blue.
42 Part I: The ABCs of CSS
