HTML and CSS Reference
In-Depth Information
affect the page on which they're placed. On a multiple-page site, the
rules would have to be included on every page, so it's far more common
to put all the
CSS
in a separate file and then link to it from each page.
This
<link>
element references an external style sheet:
<link href="styles.css" rel="style sheet">
Whitespace in CSS
The
<style>
element example is a more compact representation than used pre-
viously: everything is on a single line instead of broken out into individual lines.
It doesn't matter to the browser how the CSS is spaced—whitespace is ignored
just as with HTML, but most human readers find it easier to read if the styles are
broken up across multiple lines.
Like the
<style>
element, the link should appear in the head of the doc-
ument. The file styles.css would then contain the
CSS
:
p { color: red; }
This same
CSS
file can be used with every page on the site that links to
it. Most browsers download style.css only once and then reuse it, sav-
ing bandwidth and page-rendering speed.
The final way to include
CSS
is to link from within existing
CSS
. This
requires that some
CSS
has already been included, via a link or a
<style>
element:
<style> @import url('styles.css'); </style>
In this example, the style sheet is imported from a
<style>
element in
the head section of the document.
Inheritance
One of the key properties of
CSS
is that styles are inherited down the
document tree. In the simple example in the previous section, it's already
possible to see this feature in action. The
font-family
property is speci-
fied only for the
<body>
element, but the elements in the document are
displayed with the Komika Hand font from that rule. This is because all
the other elements are children of the
<body>
element, so they inherit the
font-family
property.
