HTML and CSS Reference
In-Depth Information
Creating Sitewide Style Sheets
You can't capture the real efficiency of style sheets until you start creating sitewide style
sheets. You can store all of your style information in a file and include it without resort-
ing to any server trickery (which I discuss in Lesson 21, “Taking Advantage of the
Server”). A CSS file contains the body of a
<style>
tag. To turn the style sheet from the
previous section into a separate file, you could just save the following to a file called
style.css
:
8
h1 { font-size: x-large; font-weight: bold }
h2 { font-size: large; font-weight: bold }
In truth, the extension of the file is irrelevant, but the extension
.css
is the de facto stan-
dard for style sheets, so you should probably use it. After you've created the style sheet
file, you can include it in your page using the
<link>
tag, like this:
<link rel=“stylesheet” href=“style.css” type=“text/css” />
The
type
attribute is the same as that of the
<style>
tag. The
href
tag is the same as
that of the
<a>
tag. It can be a relative URL, an absolute URL, or even a fully qualified
URL that points to a different server. As long as the browser can fetch the file, any URL
will work. This means that you can just as easily use other people's style sheets as your
own, but you probably shouldn't.
There's another attribute of the link tag, too:
media
. This enables you to specify different
style sheets for different display mediums. For example, you can specify one for print,
another for screen display, and others for things like aural browsers for use with screen
readers. Not all browsers support the different media types, but if your style sheet is spe-
cific to a particular medium, you should include it. The options are
screen
,
print
,
pro-
jection
,
aural
,
braille
,
tty
,
tv
,
embossed
,
handheld
, and
all
.
You can also specify titles for your style sheets using the
title
attribute, as well as alter-
native style sheets by setting the
rel
attribute to
alternative style sheet
.
Theoretically, this means that you could specify multiple style sheets for your page (with
the one set to
rel=“stylesheet”
as the preferred style sheet). The browser would then
enable the user to select from among them based on the title you provide. Unfortunately,
none of the major browsers support this behavior.
As it is, you can include links to multiple style sheets in your pages, and all the rules will
be applied. This means that you can create one general style sheet for your entire site and
then another specific to a page or to a section of the site, too.
