Rate this page

Flattr this

Add an external CSS stylesheet to an HTML or XHTML document

Content

Objective

To add an external CSS stylesheet to an HTML or XHTML document

Scenario

Suppose you are developing a website that uses a common CSS stylesheet for all pages. To avoid duplication and conserve bandwidth you have chosen to make this an external stylesheet, meaning that it exists as a separate file on the webserver which is downloaded separately from the pages that make use of it.

The stylesheet can be accessed using the site-relative URL /stylesheet.css.

Methods

Method (using link)

Tested with:

Chrome (9, 10, 11, 12, 13, 14)
Firefox (1.0, 1.5, 2.0, 3.0, 3.5, 3.6, 4, 5, 6, 7, 11)
IE (6, 7, 8, 9)
Opera (9, 10, 11)
Safari (5)

The simplest way to use an external stylesheet is to link to it by means of an HTML or XHTML link element. This should have a relationship type of ‘stylesheet’ and a content type of ‘text/css’. It should be placed within the head of the document.

The correct form of the link element depends on the document type. In XHTML the element (like all elements) must be explicitly closed. The preferred way to achieve this is by using an empty element tag in place of an ordinary start tag:

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>My Homepage</title>
<link rel="stylesheet" href="/stylesheet.css" type="text/css" />
</head>

Note the space character immediately prior to the /> sequence at the end of the tag. Its purpose is to improve compatibility with web browsers that support HTML but not XHTML. Use of a space is recommended (but not required) by the XHTML 1.0 specification.

In HTML prior to version 5 the element must not be explicitly closed:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Homepage</title>
<link rel="stylesheet" href="/stylesheet.css" type="text/css">
</head>

The content of a link element is declared to be EMPTY in the DTD, therefore it must not have an end tag. These versions of HTML do not allow empty element tags.

The draft HTML version 5 specification (as of July 2011) allows either syntax.

The link element exists in all versions of HTML from version 2 upwards and all versions of XHTML. The use of rel="stylesheet" was not formally standardised until HTML version 4 and XHTML version 1, however it is described in early versions of the CSS specification. It would be reasonable to expect any browser that provides a standard implementation of CSS to support the link element as described above.

Method (using @import)

Tested with:

Chrome (9, 10, 11, 12, 13, 14)
Firefox (1.0, 1.5, 2.0, 3.0, 3.5, 3.6, 4, 5, 6, 7, 11)
IE (6, 7, 8, 9)
Opera (8, 9, 10, 11)
Safari (4, 5)

An alternative method is to import the external stylesheet into an internal stylesheet using an @import rule:

<style type="text/css">
@import "/stylesheet.css";
</style>

The following alternative forms of the @import rule are equally valid:

@import url(/stylesheet.css);

@import url("/stylesheet.css");

This method should work in any browser that supports CSS level 1 or better. There are some very old browsers which do not support @import in some or all of its incarnations, but which do support the link element. This behaviour has historically been used to serve different combinations of stylesheet to different browsers, but should not be needed on a modern standards-based website.

Variations

Linking to multiple stylesheets

It is possible to link to multiple stylesheets by using multiple link elements:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Homepage</title>
<link rel="stylesheet" href="/stylesheet1.css" type="text/css">
<link rel="stylesheet" href="/stylesheet2.css" type="text/css">
</head>

or multiple @import rules:

<style type="text/css">
@import "/stylesheet1.css";
@import "/stylesheet2.css";
</style>

It is also possible to combine @import rules with other rules in an internal stylesheet, provided that the @import rules come first. For example, the first @import rule in the following stylesheet is allowed but the second one is not:

<style type="text/css">
@import url("/stylesheet1.css");
body { color:green; }
@import url("/stylesheet2.css");
</style>

(A @charset rule would precede any @import rules, however @charset should not be used in an internal stylesheet.)

See also

Further reading

Tags: css | html | xhtml