CSS @import Rules

You are Here:

CSS @import Rules

CSS @import rule is used to import style rules from other style sheets.

Declaration Rules

The following rules must be followed while declaring @import.

  • The @import rule must be at the top of the document but after any @charset declaration (if any).
  • The @import rule also supports media queries, so you can allow the import to be media-dependent.

Example

The following is the foo.css style sheet file.

foo.css
body { background-color: LightGreen; }

The following is the bar.css style sheet file.

bar.css
h1 { text-align: center; }

The following is the main.css style sheet file. Here we are going to import foo.css and bar.css style sheet files.

main.css
/* Two ways of importing css file */ @import "foo.css"; @import url("bar.css"); /* normal css of main styleSheet */ p { font-size: 17px; }

The following is the html file for demonstration.

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <h1>CSS @import Rule</h1> <p>This is a paragraph.</p> </body> </html>

Syntax

@import "foo.css"; /*Using string*/ /* or */ @import url("bar.css"); /*Using url*/

Reminder

Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author