How to Import a CSS File into Another CSS File
The ability to import external CSS files into another CSS file is quite handy in certain cases while designing a website or web application. In this tutorial, I will show you how to import a CSS file in another one.
CSS (Cascaded Style Sheets) style files are where the visual design of a website, its style declarations, are stored. You can store the styles of your web project in a number of ways including external styles, internal styles or inline styles depending on the nature of your project and what you are trying to achieve with each style, as long as you follow the standard CSS rules and syntax.
Why Import CSS Style Files?
For most basic websites, a single style file (usually named as style.css) will be enough for defining the style of the site. However, complex websites with high traffic, with dynamic features, multiple user interfaces and different templates may require the use of multiple style files for efficiency in site development, maintenance and page loading speeds.
The import feature of CSS allows you to group various types of styles in separate style files and then import them into one master style file and link to that single style file from your site's pages. For example, you may create and maintain a separate CSS file for the fonts that you use on your website, for responsive styles that cater to different screen sizes, for third party style files or frameworks such as Bootstrap or Less.
It is not only great for grouping different kinds of styles together but it also helps better organize your CSS styles and prevent style files getting too large or complex, rendering them harder to make edits later on. Also, by linking to a single style file compared to multiple style files, you will have used lesser HTML code in total.
TIP: If you are new to CSS, you may also want check our introduction to CSS.
Let's first quickly see how style files are imported, then we will continue with some important points regarding importing CSS files.
How to Import CSS Style Files
Assume that you have prepared multiple style files for your website and put them all into a folder named as css. You then created one master style file named as main.css and put it into the same folder. In order to import all other style files into this master file, you will need to use the @import at-rule of CSS:
In the above example, we imported four CSS files into the main.css file. Since all files are located in the same folder, we used their names directly. If the main CSS file was in the root folder (or anywhere else), we would need to specify the paths for the separate CSS files accordingly:
Then, link to the main style file from your HTML pages like the following:
<link rel="stylesheet" href="/css/main.css">
Now, when your website is opened in the web browser, first the main.css will be processed and all the imported files will be added to the styles of your site. The page that will display in the browser will be the result of all the CSS files that are imported.
TIP: While working on different versions of the same style files, you can use Notepad++ file comparison to easily compare and keep the files synchronized.
Things to Know When Importing CSS Files
First thing you should pay attention is to use the correct names and paths for the style files that are imported into the main style file. Sometimes it is easy to overlook CSS errors or mistakes, especially with imported files, hence always double check the file names and paths whenever you use @import.
The global rule for CSS being processed as cascaded is also in effect here. The styles in each file will be taken into account based on the importing order of that file in the master file. In our example, any different styles that you declare for the same element in the users.css file will override the styles in the admin.css file.
Using an unnecessary amount of style files and imports is usually considered as a bad web design practice. Website loading speed depends mostly on the Internet speed of the user but it is also highly dependent on the total size of the web page and the resources it uses such as the images, scripts and the style file(s). The memory (RAM) that the web browser uses also comes into play since the web pages are only getting heavier with so many resources.
The more style files you use on your website, the more bandwidth it will consume on your hosting. Also, though not directly related, using less styles, hence smaller style files resulting in faster page loading can also be considered as a positive affect on your on-page SEO.
Missing Imported CSS Files
If you have missing imported style files on your website, the website will not display properly and they will cause "404 Not Found"status codes in the error logs. Therefore, make sure that you have named all style files correctly and used the correct path information in the master style file.
Also check the following web styles related posts:
How to Control CSS Variables with PHP
How to Add Custom Userstyles in Chrome
How to Add Custom Userstyles in Firefox
10 Websites to Find Free Web Design Tutorials
More CSS Tips
CSS Div with Background Image Tutorial CSS Div with Background Video Tutorial How to Hide Scrollbars with CSS CSS Full Screen Video Background Tutorial CSS Full Screen Background Image Tutorial CSS Basics Part 12: CSS Tables CSS Basics Part 11: CSS Lists CSS Basics Part 10: CSS Links CSS Basics Part 9: CSS Borders CSS Basics Part 8: CSS BackgroundsCSS Tips