---
title: "Import multiple .css file into single file"  
description: "Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets in"  
author: "AVADHESH PATEL"  
published: 2012-12-31  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/421/import-multiple-css-file-into-single-file  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 2 minutes  

---

# Import multiple .css file into single file

Importing allows you to import one [style sheet](https://www.mindstick.com/interview/1606/what-are-style-sheets) into another. This is slightly different than the link scenario, because you can import [style sheets](https://www.mindstick.com/forum/506/why-do-we-use-style-sheets) inside a linked style sheet. But if you include an @import in the head of your HTML [document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool), it is written:\

<style type="text/css">@import url("StyleSheet.css");</style>

From a standards point of view, there is no [difference](https://www.mindstick.com/articles/157114/good-news-or-bad-news-and-the-difference-is) between linking to an [external](https://www.mindstick.com/articles/12810/how-to-connect-tablet-to-external-monitor-or-flat-screen-tv-using-computer-adapters) style sheet or importing it. Either way is correct, and either way will work equally well (in most cases). But there are a few reasons you might want to use one over the other.

According [developer](https://www.mindstick.com/articles/157260/variation-between-web-designer-and-web-developer)’s good scenario of using @import is, for example you are linked many external css files in [your project](https://www.mindstick.com/forum/156583/best-way-to-link-bootstrap-file-in-your-project) as

```
<style type="text/css">        <link rel="stylesheet" href="/css/reset.css"/>        <link rel="stylesheet" href="/css/visualize.css"/>        <link rel="stylesheet" href="/css/datatables.css"/></style>
```

There is another way of using above styles. Create a another .css file (e.g. bundle.css) and put all .css file as

```
 @import url('/css/reset.css'); @import url('/css/visualize.css'); @import url('/css/datatables.css');
```

And relate it in your [homepage as](https://yourviews.mindstick.com/view/86726/making-a-homepage-as-per-google-strategy-does-it-matter):

```
<style type="text/css">        <link rel="stylesheet" href="/css/cssImports.css"/> </style>
```

##### Note:

For [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript), import doesn't work. But you can create a single [JS file](https://www.mindstick.com/forum/12680/call-custom-js-function-inside-jquery-ajax-that-is-defined-in-an-external-js-file) and include the JavaScript code of each file after one another. But this is not recommended. It is better to have separate <script> tag for each JavaScript file.

---

Original Source: https://www.mindstick.com/blog/421/import-multiple-css-file-into-single-file

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.