11.4 Importing External Style Sheets

NN 4, IE 4

11.4.1 Problem

You want to implement a style sheet strategy across multiple HTML documents in a web site without embedding explicit CSS code in every document.

11.4.2 Solution

Define a style sheet (with one or more rules) as a separate .css file and import it into a document with the <link> tag:

<link rel="stylesheet" type="text/css" href="myStyleSheet.css">

The contents of the style sheet file should consist solely of style sheet rules. Do not include the <style> tags or the usual nested HTML comments in this file.

11.4.3 Discussion

The Solution shows a cross-browser solution that works with all CSS-capable browsers. More current browsers that support the CSS2 specification can use an alternative "at-rule" inside the document's <style> tags. The at-rule version of the Solution is:

<style type="text/css"> <!-- @import url(myStyleSheet.css) --> </style>

You can use the @import rule starting with Internet Explorer 4 and Netscape 6. Some scripters use this import technique intentionally to exclude Navigator 4, which ignores the @import rule. You can combine the @import rule with other page-specific style sheet rules within the same <style> tag set on a page.

The filename extension for an external style sheet file should be .css. The server should also be configured to send the text/css MIME type with the file for Netscape 6 and later to process the file correctly (and to adhere to Internet standards).

11.4.4 See Also

Recipe 11.5 for importing style sheets tailored to a particular browser or operating system; Recipe 11.6 for changing an imported style sheet after the page has loaded; Recipe 14.3 for importing HTML content into a page.