Combine Your CSS Media Styles Into One File

Written by David Walsh on Friday, November 23, 2007

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?

Download PDF

Follow via RSS Epic Discussion

November 25 / #

gregf says:

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

November 25 / #

david says:

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

November 26 / #

jay says:

Really useful piece of information. Thanks for sharing!

April 25 / #

Ivan says:

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

April 25 / #

david says:

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

April 25 / #

Louis says:

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.

April 26 / #

Rafael Masoni says:

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

April 27 / #

Gunner Si says:

Sweet tip!

May 03 / #

Martyn P says:

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

April 28 / #

James says:

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

July 09 / #

Commercial Land On Rent In Noi says:

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

September 26 / #

Ian Crowther says:

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!!

Ta!

December 18 / #

Dave Stuart says:

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{
body
{
font-family: Verdana;
color: #808080;
background-color: #CCCCCC;
}

}

@media print
{
.noShow {display:none;}

}

Thanks
Dave Stuart (Calgary, Alberta, Canada)