1. Technology

Using @import in Cascading Style Sheets

Importing External Style Sheets


Businessman using computer mouse and typing on laptop
Paul Bradbury/OJO Images/Getty Images

The @import rule allows you to include external style sheets in your document. It is a way of creating a style sheet within your document, and then importing additional rules into the document.

To use the @import rule, type:
<style type="text/css">
  @import url("import1.css");
  @import url "import2.css";

The url() is not required. The double quotes are required for valid XHTML, but browsers that support url() tend to support it with or without quotes.

You can also include an @import rule in a style sheet with styles:
<style type="text/css">
  @import url("import3.css");
  p { color : #f00; }

@import rules must always be first in a document

Finally, you can also import a style sheet for just a specific media:
<style type="text/css">
  @import url("import4.css") tv, print;

This acts the same as if you had defined the media type in the <style> tag.

Browser Support

Netscape 4.x and IE 3.x do not support the @import rule. Internet Explorer 6 and below do not support the media designation. IE 4.x has some support for the @import rule, but it's spotty, and it's best not to rely on it.

See More About

©2014 About.com. All rights reserved.