@import CSS At-Rule

Description

The CSS @import at-rule allows you to import style rules from other valid CSS stylesheets. This can be useful for organizing your CSS code into smaller, more manageable files, or for reusing common styles across multiple pages.

To use the @import at-rule, simply place it at the top of your CSS stylesheet, before any other style declarations. The @import rule must be followed by the URL of the CSS stylesheet that you want to import. You can use either a relative or absolute URL.

Syntax

@import url;
/* or */
@import url list-of-media-queries;

Values

  • urlIs a <string> or a <url> representing the location of the resource to import. The URL may be absolute or relative.
  • list-of-media-queriesIs a comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL. If the browser does not support any these queries, it does not load the linked resource.

Example

@import 'custom-styles.css';
@import url('../styles/colors.css');
@import url('../styles/print-styles.css') print;
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

Browser Support

The following table will show you the current browser support for the at-rule @import.

Desktop
Edge Chrome Firefox Opera Safari
12113.51
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.11137

Last updated by CSSPortal on: 30th September 2023