How to Import a CSS File From Another CSS File


Today, I will tell you how to call a CSS file from another CSS file. To make it clearer, we will call fileB.css from fileA.css, which both are in the same directory. This comes handy when you want to keep your styling rules organized.

In fileA.css, let’s imagine we have this code:

body {
.someclass {

1. To call fileB.css, we will use a function called import.

@import url("fileB.css");

The syntax is pretty easy:

@import url(“relative path to the current css file (fileB.css)“);
Something important to remember is that all the imports, need to be at the start of the file, before any styling rule.

2. The final code will look like this:

@import url("fileB.css"); /* it is in the same directory as fileA.css */
body {
.someclass {

And there you go! This way you can keep the rules organized for let’s say, login forms, header, footer, etc. If you have any question, please do not hesitate to contact me.

Best Regards,


Owner of Juapo2Services

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

Richi González

I started programming when I was 12. I'm a Developer and have been working with the Clip-Bucket script since it came out. I'm the Liaison between Arvixe and Clip-Bucket, so anything you need regarding Clip-Bucket or any particular computer-related subject you need, let me know so I can assist you.

Leave a Reply

Your email address will not be published. Required fields are marked *