How to Import a CSS File From Another CSS File

Hello,

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 {
 background-color:black;}
.someclass {
 font-size:17px;
}

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 {
 background-color:black;
}
.someclass {
 font-size:17px;
}

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,

Richi

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

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 became a Liaison between Arvixe and Clip-Bucket, so I am here to assist you with anything you need regarding Clip-Bucket or any particular computer-related subject you need. Best Regards, Richi

Leave a Reply

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


6 × 8 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>