Combine Your CSS Media Styles Into One File

By on  

When a user comments on one of my blog posts, and they provide a website URL, I always visit the site. I appreciate the time a visitor takes to comment on a post, so I return the favor by checking out the user's website...and the source code.

Often I see the following:

<link href="styles/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/print.css" rel="stylesheet" type="text/css" media="print" />

The above code requests two separate stylesheets, one for global media styles (screen, print, handheld, tv...) and one for print only. There's nothing wrong with the above, but if load time is an issue you could save yourself a server request by combining your CSS files:

/*  all media  */
@media all {
	body	{ color:#666; font:13px arial, helvetica, sans-serif; padding:20px 0 30px 0; }

@media print {
	body	{ color:#000; font:12px arial, helvetica, sans-serif; padding:0; }

You address each media by using "@media [media] { /* css here */ }". I also use a single CSS file to make editing easier -- no switching buffers, and how often do you set specific styles for print and screen per a CSS class?

Track.js Error Reporting

Upcoming Events

Recent Features

Incredible Demos

  • Create Digg URLs Using PHP

    Digg recently came out with a sweet new feature that allows users to create Tiny Digg URLs which show a Digg banner at the top allowing easy access to vote for the article from the page. While I love visiting Digg every once in a...

  • Sexy Opacity Animation with MooTools or jQuery

    A big part of the sexiness that is Apple software is Apple's use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I've put together an example of a sexy opacity animation technique...


  1. gregf

    Wow, this is great. Going to put this to use soon. My only question is do all the major browsers support doing this?

  2. Absolutely, Greg — this is basic CSS syntax. Thanks for sharing your question with everyone!

  3. Really useful piece of information. Thanks for sharing!

  4. Ivan

    So, this means that media=”” should be removed from tag in head of document?

  5. @Ivan: Right Ivan, you don’t need that if you use the above code.

  6. That’s funny, I just wrote about the same tip some days ago !

    You might want to link to my post, as a french “translation” of yours.

  7. Wow, that’s new for me!
    Thanks for sharing!

  8. Sweet tip!

  9. Martyn P

    Thanks so much! I had no idea that this was possible!

  10. Question, if its so popular then why is it that developers not use this more often? I question this because my primary development platform is Joomla! and you see CSS and JS being used freely and all over the place. For instance I did a little test to see how many CSS files where in my website folder (NOT HOW MANY WHERE BEING USED) and the total…. are you ready for this: 1457!

    No joke at all! So, from a user/developer standpoint I see some issues with wanting to use this.
    1. Have to sort out all of the CSS Files and figure out whats real and whats now
    2. Have to spend a LOT of time doing so
    3. It goes on

    On the other hand to reduce HTTP Request would be beneficial as mentioned above for load times so for someone developing a small platform with minimal CSS files this seems like a good option. I may give it a try if I can reduce 1400 to 100.. lol

  11. Thanks for the post. What do you all think of the future of blogging? I have been reading a lot about google’s attempt to gain preferential treatment for its site from internet providers. This will result in their sites being faster than sites owned by individuals and/or smaller comapnies. It’s my beleif that if google is able to succeed there will be far less websites out there and therefore far less blogging. For more information : http://www.allrentdeals.com/City/noida-rent-commercial-properties.aspx

  12. Hi David,

    I have stumbled upon your website a couple of times now while searching for web related issues. Each time i find a clear, well written and useful post. Thanks for the efforts, keep up the good work.. its not all about tweets!!


  13. David, nice one! the @media all was key for me. I was looking for a way to hide elements/controls when printing WITHOUT having to include all the sceen css stuff inside the print section. I got my answer on YOUR blog. Keep up this Blog, it’s important to share like this PLUS it takes time.

    @media all{
    font-family: Verdana;
    color: #808080;
    background-color: #CCCCCC;


    @media print
    .noShow {display:none;}


    Dave Stuart (Calgary, Alberta, Canada)

  14. Good point, especially as IE allows only two open conection at the time… So, same is true for JS files and images (css clipping)…

  15. This is what I was looking for exactly. I had two CSS files now I combined and made them one.


  16. With larger sites, css files can grow to a point where any give page may only be using 15% percent of your css classes at a time. If your css classes are broken up into page specific groups, you can cut down on load time by only calling the classes you need on a page by page basis. This will cut down your css load time significantly and improve performance.

    • Agreed. This isn’t an enterprise solution. Keep in mind that many large sites don’t manager their resources that well, though. HTML a mess. A billion JS files included. This wouldn’t be the worst solution in the world. :)

  17. Hi David,
    Nice post, I’ve been recently looking for some additional information about combining my CSS and JS files but haven’t really gotten around to doing it, or at least feeling safe about it.

    I use wordpress and I have about 30 plugins active at the moment. So would I be able to combine most of the plugins CSS files into one? making sure there are no conflicts between ‘names’ of certain styles right?

  18. I don’t know which files are using the css files. Is there any tools to find out which files reference the css files?

  19. When combining two separate SYTLESHEETS into one STYLESHEET that is making it three but you are referencing the third stylesheet,which contains the two different sytles to your HTML page….How is done ? PLEASE RESPONDS !!

  20. Searched in google 2 sec, read your post 5 sec, found the solution.

    only 7 sec to solve my problem, thank you!

  21. So after I combine my style sheets into one, lets call it “styles.css” what do I put in the head of the HTML portion? Will it still be or do I need to put something else?

  22. While this is a great solution is your a web developer, in my case this is too technical for me to implement.

    Is there any easier way….maybe with a plugin that will do this?

    While our site loads on average anything from 700ms to 1.2 seconds (depending where in the world you are) we would like to improve it.

  23. how to bloack print screen option in website ?

    • Theoretically you could try to use a JavaScript listener for the keycode for the print screen button or Ctrl+P, but the realistic answer is “you can’t”. Measures like this, such as websites that block right-clicking in a misguided attempt to prevent people from downloading content/images, are extremely easy to circumvent.

  24. I finally found a solution for combining media and print. That should cut down on one request to satisfy’s PageSpeed’s grousing about my css files holding up things (they are highly minimized). Then the webpagetest.org results made me want to drink… Many sites recommend placing some styling rules inline – OK, I’ll shift that paradigm. It seems that now one larger files is better than 2 or 3 small files due to load request times. There are varied suggestions on the Internet, so it is challenging to determine which are best for your/my unique website. Anyway, thank you for your article as I was hunting for this exact answer, so at least I can start here Cheers!

  25. David, I’m really big into minifying my CSS; all shorthand, very tight. Can I take your example and smush it all together? e.g.:

    @media all {body {color:#666;font:13px arial, helvetica,sans-serif;padding:20px 0 30px 0;}}
  26. ormoz

    Thanks david, but is it also possible to use media queries for screen width in the css files?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Intercept HTTP Requests with Node.js nock

    Unit testing external APIs is difficult no matter what language you do it in.  Hell, working with any external API is scary, if only because you have zero control of networking issues, API changes, and a host of other issues.  But if you do create a service...

  • Introducing Frontend Masters (with Giveaway)

    Hey DWB readers, I'm super happy to sponsor this blog. I've been a long-time reader and fan, since back when David wrote about JavaScript and MooTools back in 2007. ;-) We are in one of the fastest changing, evolving, most lively communities on earth: JavaScript and front-end web...

  • Get Node.js Command Line Arguments with yargs

    Using command line arguments within Node.js apps is par for the course, especially when you're like me and you use JavaScript to code tasks (instead of bash scripts).  Node.js provides process.argv but that doesn't provide a key: value object like you'd expect: Bleh.  If you want to work with a...

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...