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!