HTML and CSS Reference
In-Depth Information
With one
<link>
tag, the browser should load the styles in the referenced
stylesheet and format the document accordingly, with any document-
level and inline styles overriding the external definitions. With two or
more
<link>
tags, the browser should present the user with a list of all
the linked stylesheets. The user then selects one of the linked sheets,
which the browser loads and uses to format the document; the other
linked stylesheets get ignored.
On the other hand, the styles-conscious browser merges, as opposed to
separating, multiple
@import
ed stylesheets to form a single set of style
rules for your document. The last imported stylesheet takes precedence
if there are duplicate definitions among the stylesheets. Hence, if the
external
gen_styles.css
stylesheet specification first tells the browser to
make
<h1>
contents blue and italic, and then a later
spec_styles.css
tells
the browser to make
<h1>
text red, the
<h1>
tag contents appear red and
italic. And if we later define another colorsay, yellowfor
<h1>
tags in a
document-level style definition, the
<h1>
tags are all yellow and italic.
Cascading effects. See?
In practice, the popular browsers treat linked stylesheets just like im-
ported ones by cascading their effects. The browsers do not currently let
you choose from among linked choices. Imported styles override linked
external styles, just as the document-level and inline styles override ex-
ternal style definitions. To bring this all together, consider this example:
<html>
<head>
<link rel=stylesheet href=sheet1.css type=text/css>
<link rel=stylesheet href=sheet2.css type=text/css>
<style>
<!--
@import url(sheet3.css);
@import url(sheet4.css);
-->
</style>
</head>
