External Style Sheets
External style sheets allow you to define a set of rules that can be shared
among many HTML documents. This is advantageous in that making a change to
the style sheet will automatically be enforced in all of the HTML documents
that reference the style sheet.
External style sheets have an extension name of .css and contain a list of
rules that are to be applied to any HTML document that references it. The following
example may be the contents of a CSS file.
mystylesheet.css
/* Define the style for the body */
body
{
font: normal 1em/1.2em arial, helvetica, sans-serif;
color:#000;
background-color:#fff;
}
/* Define style for links */
a
{
text-decoration:none;
color:#00c;
background:transparent;
}
a:hover
{
color:#900;
background:transparent;
}
/* Define a class for links in the menu */
a.menu
{
text-decoration:none;
color:#000;
padding:2px;
border-bottom:#cc9 2px solid;
border-right:#cc9 2px solid;
background:#ffc;
font-size:large;
}
a.menu:hover
{
color:#000;
border-bottom:#603 2px solid;
border-right:#603 2px solid;
background:#ffc;
}
Linking to the Style Sheet
For an HTML file to use an external style sheet, there must be a link element
in the head of the HTML document specifying the style sheet to use. Depending
on how you link to the external style sheet, there are three different relationships
it may have with the document, persistent, preferred, and alternate. A mixture
of the linking techniques may be applied, as more than one style sheet may
be specified for a document.
Persistent Style Sheets
A persistent style sheet is always enabled. If the rules for a document are
contained in a single style sheet, then this is the way you will link to
the style sheet. If the document has more than one style sheet associated
with it, the basic rules may be placed in this style sheet. The relationship
is specified with a rel attribute value of, "stylesheet", and no
title attribute is provided.
<head>
<title>Title for this Page</title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<link href="mystylesheet.css" rel="stylesheet" type="text/css">
</head>
Preferred Style Sheets
A preferred style sheet is enabled by default, but may be switched by the
user for an alternate style sheet. A preferred relationship is specified with
a
rel attribute value of, "stylesheet", and a title attribute is also
provided. You may specify more than one preferred style sheet by specifying
the same title for each. The preferred style sheets will be grouped, and enabled
and disabled together. If more than one group of preferred style sheets are
specified, the first group will take precendence over the other groups.
Alternate Style Sheets
An alternate style sheet is one that may be selected by the visitor as an alternative
to the preferred style sheet. An alternate relationship is specified with
a rel attribute value of, "alternate stylesheet", and a title attribute
is also provided. Like preferred style sheets, alternate style sheets may
be grouped by giving them the same title.
The following example uses a persistent, preferred, and alternate style sheet,
allowing the visitor to customise the look of the site to their taste.
<head>
<title>Title for this Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="persistent.css" rel="stylesheet" type="text/css">
<link href="preferred.css" rel="stylesheet" title="Olive" type="text/css">
<link href="alternate.css" rel="alternate stylesheet" title="Yellow" type="text/css">
</head>
Importing Style Sheets
CSS defines special rules using the @ character. This may be used to import
a style sheet, between inline style tags. This is useful for specifying
complex rules for non-standards compliant browsers, as they won't understand
the
import command. The final example defines the relationship with the external
style
sheets above, but also imports a style sheet that defines rules for layout.
<head>
<title>Title for this Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="persistent.css" rel="stylesheet" type="text/css">
<link href="preferred.css" rel="stylesheet" title="Olive" type="text/css">
<link href="alternate.css" rel="alternate stylesheet" title="Yellow" type="text/css">
<style type="text/css">@import "layout.css";</style>
</head>