The @import Element – When Is It Used In CSS?

• Function: The @import rule loads one stylesheet inside another.

• Placement: It must always appear before any normal CSS rules.

• Behavior: All imported stylesheets load actively and cannot be optional.

• Modern Usage: Build tools and <link> tags often replace it today.

RECOMMENDED ARTICLES

In the previous module, you learned that the <style> element can contain CSS rules directly inside an HTML document. You have also already learned about the use of the <link> element to connect CSS to HTML.

Now let’s look at a special CSS command called @import, which allows one stylesheet to load another stylesheet.

This provides a way to organize CSS into smaller, reusable files.

What Is the @import Rule?

The @import rule tells the browser:

“Before processing this stylesheet, load another stylesheet first.”

Example:

When the browser sees this rule, it first loads styles.css and then continues processing the current stylesheet.

Simple Analogy

Imagine you’re reading a textbook.

Before Chapter 5 begins, the author writes:

“Read Chapter 2 first.”

You stop, read Chapter 2, then return to Chapter 5.

The @import rule works in the same way.

It tells the browser:

“Load this stylesheet first, then continue.”

Basic Syntax

or

Both forms are valid.

Using @import Inside a Style Element

Example:

The browser performs the following steps:
Step 1
Load styles.css
Step 2
Read the remaining CSS rules
Step 3
Apply all styles to the webpage

Why Use @import?

The main purpose is to divide CSS into smaller files.

Instead of creating one huge stylesheet:

• styles.css

you can create:

• layout.css
• typography.css
• colors.css
• forms.css

and combine them.

Example

Now all three stylesheets become part of the current stylesheet.

Important Rule: @import Must Come First

This is the most important rule beginners must remember.

The @import statement must appear before all normal CSS rules.

Correct Example

This works.

Incorrect Example

This does not follow CSS rules.

Modern browsers ignore the improperly placed import.

Why Must It Come First?

When the browser begins reading a stylesheet, it needs to know immediately which additional stylesheets must be loaded.

If imports appear later, the browser has already started processing styles.

Therefore CSS requires imports to appear before other rules.

Memory Aid

Think of boarding a plane.

Passengers must board before takeoff.

You cannot suddenly decide to board more passengers after the aircraft is already in the air.

Similarly:

@import

must come before normal CSS rules.

Using Multiple Imports

The type attribute tells the browser what type of content is inside the style element.

Example:

The browser loads all three stylesheets.

What Happens Next?

The browser combines all imported styles with the current stylesheet.

Example:

The final stylesheet consists of:

Rules from layout.css

Rules from the current stylesheet

Unlike Alternate Stylesheets…

Recall that with the <link> element, you can create:

Preferred stylesheets

Alternate stylesheets

The @import rule cannot do this.

Every imported stylesheet is loaded and used.

Example

Result:

layout.css -> loaded

colors.css -> loaded

fonts.css -> loaded

All three are active.

None are optional.

Restricting Imports to Specific Media

Like the <link> element, @import can target specific media types.

Import for All Devices

This applies everywhere.

Import for Screens Only

This stylesheet affects:

• Monitors
• Phones
• Tablets

Import for Printing

This stylesheet affects printed pages only.

Multiple Media Types

Example:

The stylesheet applies to:

• Screens
• Projectors

Importing Stylesheets into Other Stylesheets

One powerful feature of @import is that it works inside CSS files.

Suppose we have:

• main.css
• main.css

The browser loads all imported stylesheets automatically.

Why This Is Useful

Large websites often separate CSS by purpose.

Example:

• layout.css
• Page structure.
• typography.css
• Fonts and text.
• colors.css
• Colors and themes.
• forms.css
• Form styling.

This organization makes projects easier to maintain.

Relative URLs vs Absolute URLs

The imported stylesheet can be referenced using either type.

Relative URL

Used for local project files.

Absolute URL

Used when loading from another location.

Example Project Structure

project/

│

├── index.html

│

├── css/

│   ├── main.css

│   ├── layout.css

│   ├── colors.css

│   └── typography.css

main.css

This creates one combined stylesheet.

Browser Processing Example

Suppose the browser reads:

The browser:

Step 1

Loads layout.css

Step 2

Loads colors.css

Step 3

Reads the remaining rules

Step 4

Combines everything

Step 5

Applies styles to the page

Note

Historically, @import was very popular because it allowed developers to split large stylesheets into smaller modules.

Modern developers still use it occasionally, but many prefer:

or build tools such as:

• Webpack
• Vite
• Parcel

for managing CSS dependencies.

Common Mistakes Beginners Make

1. Putting @import After CSS Rules

Wrong:

The import may be ignored.

2. Forgetting the Semicolon

Wrong:

3. Assuming Imported Styles Are Optional

Every imported stylesheet is loaded.

There is no alternate stylesheet mechanism with @import.

4. Mixing Up File Paths

Wrong:

Even a small spelling mistake causes failure

4. Mixing Up File Paths

Wrong:

when the file is:

styles.css

Even a small spelling mistake causes failure.

5. Importing Too Many Files

Large numbers of imports can slow page loading because each stylesheet must be requested separately.

Memory Aid

Think of @import as inviting guests to a meeting.

Before the meeting starts, everyone who was invited must arrive.

That’s why imports must come first.

Quick Summary

@import loads one stylesheet into another stylesheet.

Syntax:

Imports must appear before normal CSS rules.

Multiple imports are allowed.

All imported stylesheets are loaded and applied.

Media types can be specified.

Both relative and absolute URLs are supported.

@import is useful for organizing large CSS projects into smaller files.