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>
Comments