How to merge two CSS files

Seeing the “combine external CSS” warning in Pingdom, GTmetrix, or Google PageSpeed Insights? You are not alone, as this is a very common error for many WordPress website owners. This warning typically shows when you have 10 or more CSS files loading from a CDN and or subdomain (external domain). A way to fix this is to concatenate your CSS files, or combine them so that they are loading in a single request.

Note: If you are running over HTTPS with a provider that supports HTTP/2, this warning can usually be safely ignored now. With HTTP/2 multiple CSS files can now be loaded in parallel over a single connection.

How to merge two CSS files
Combine external CSS warning in Pingdom

If you are still running over HTTP and haven’t migrated to HTTP/2 yet, you can follow the tutorial below on how to combine external CSS files. Again, concatenation is now a technique that is generally considered deprecated.  when running over HTTPS, as well as many CDN and web hosting providers, including Kinsta. It is also important to note that Pingdom doesn’t support HTTP/2 yet since it uses an older version of Chrome.

Combine External CSS in WordPress

The combine external CSS warning is typically seen when using a CDN because you are hosting your CSS files on an external domain, such as What you can do is simply concatenate your CSS files on your web server. Once they are combined, then you will no longer see this warning as it will load them in a single request. One of the easiest ways to do this is to use a free WordPress plugin called Autoptimize, developed by Frank Goossens.

How to merge two CSS files
Autoptimize plugin

This plugin is pretty lightweight, only 176 KB to be exact. As of writing this, it currently has over 1,000,000 active installs with a 4.7 out of 5-star rating. The plugin helps you with the concatenation of your scripts, minification, expires headers, and the ability to move styles to your header and scripts to your footer.

You can download it from the WordPress repository or by searching for it within your WordPress dashboard under “Add New” plugins. Once installed you will want to go into the settings and enable the “Optimize CSS Code” option. This will concatenate (combine) your CSS files. And if you are using a CDN, make sure to input your CDN URL. This way your CSS files will load as one single request on your CDN.

Kinsta customers have direct access to the code minification feature that is built directly into the MyKinsta dashboard. This feature allows customers to enable automatic CSS and JavaScript minification with the click of a button.

How to merge two CSS files
Combine external CSS files

After you will now see your CSS files in one “autoptimize_xxxxx.css” file.

How to merge two CSS files
Combined CSS files

Get all your applications, databases and WordPress sites online and under one roof. Our feature-packed, high-performance cloud platform includes:

  • Easy setup and management in the MyKinsta dashboard
  • 24/7 expert support
  • The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability
  • An enterprise-level Cloudflare integration for speed and security
  • Global audience reach with up to 35 data centers and 275+ PoPs worldwide

Test it yourself with $20 off your first month of Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.

CSS file is at the heart of styling any website. Each CSS file is different containing various style elements and classes. CSS Merge is a handy utility that allows you to combine and merge multiple CSS files. After the install, just drag and drop multiple CSS files into the application windows and click Merge button.

How to merge two CSS files

You can select sorting type for the merge process and check option to optimize the final merged CSS file. If the selected CSS files have same classes you will get a prompt (as in screenshot below).

How to merge two CSS files

In such case, you can select same class contents from either of selected CSS file to be included in the final merged CSS File. CSS Merge tool is a simple and very easy to use program for combining and merging multiple CSS files producing neat output!

Paste the contents of the 3 css files in the order that they appear into one text file and call it say 'three_in_one.css", then link it to your html file

based on the comment from Peter's solution

please share demo

Step 1: Create/open a new Notepad file
Step 2: open the abc.css file in a notepad (right click -> open with notepad ), copy the content and paste it in the new notepad file ( step 1 )
Step 3: open the efg.css file in a notepad (right click -> open with notepad ), copy the content and paste it at the end in the new notepad file ( step 1 )
Step 4: open the hij.css file in a notepad (right click -> open with notepad ), copy the content and paste it at the end in the new notepad file ( step 1 )
Step 5: Now save the new file as AllFile.css and copy the file and place it in your project root folder
Step 6: Now delete the 3 files abc.css, def.css, ghi.css
Step 7: now add the below reference

Add your solution here

 B   I   U   S  small BIG code var  <   >   &  link [^] encode untab case indent outdent

Preview 0

Existing Members

...or Join us

Download, Vote, Comment, Publish.

Your Email  

This email is in use. Do you need your password?

Optional Password  

When answering a question please:

  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
  4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

How to merge two CSS files into one?

To combine external CSS files, you can simply copy / paste all of your CSS code into one main file. Therefore all of the content from within the other CSS files will now reside within the main file allowing the browser to only make one request for a CSS file instead of multiple.
Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using @import keyword.

Should I combine CSS files?

Combining CSS/JS files reduces the number of page requests, in turn reducing the number of round trips made to your server so that other resources can be retrieved faster. With HTTP/2, this is less of an issue as the protocol allows multiplexing, which allows requests and responses to be processed in parallel.

What is combined CSS?

'Combine CSS' seeks to reduce the number of HTTP requests made by a browser during page refresh by replacing multiple distinct CSS files with a single CSS file, containing the contents of all of them. This is particularly important in old browsers, that were limited to two connections per domain.