HTML and CSS Reference
In-Depth Information
External Style Sheets
Styles can be listed in a separate file. The primary advantage to a separate file is that by col-
lecting commonly used styles in a single file, all pages using that style sheet can be updated
by editing a single style sheet. Another key advantage is that external style sheets are cached,
which can help reduce bandwidth usage. An external style sheet can be referenced in one of
the following three ways:
@import directive
One or more
@import
directives can be placed at the beginning of any style sheet. For HTML
and XHTML documents, this would be done within an embedded style sheet:
<head><title>My Document</title>
<style type="text/css">
@import url(site.css);
@import url(navbar.css);
@import url(footer.css);
body {background: yellow;}
</style>
</head>
Note that
@import
directives can appear at the top (and, according to the specification, only
at the top) of any style sheet. Thus, one style sheet could import another, which in turn would
import a third.
link element
In HTML and XHTML documents, the
link
element can be used to associate a style sheet
with a document. Multiple
link
elements are permitted. The
media
attribute can be used to
restrict a style sheet to one or more media:
<head>
<title>A Document</title>
<link rel="stylesheet" type="text/css" href="basic.css"
media="all">
<link rel="stylesheet" type="text/css" href="web.css"
media="screen">
<link rel="stylesheet" type="text/css" href="paper.css"
media="print">
</head>
It is also possible to link to alternate style sheets. If alternate style sheets are supplied, it is up
to the user agent (or the author) to provide a means for the user to select one of the alternates:
