Recently I've been crafting my stylesheets a bit different than I had in the past. I discovered that using a stylesheet link with the media type of all (see below) you can embed other media types within your "all" stylesheet. Note many people are unsure of what to name their stylesheets and I choose to name it after the media type it is targeting or whether it is targeting Internet Explorer (ie6.css & ie7.css etc)

<link rel="stylesheet" type="text/css" href="/all.css" media="all">

The advantages of doing this over the old fashioned way of creating seperate link references for each of the media types is that you can cut down on requests to your web server. If you have a highly visited website this can make a difference. After you have created your all.css file. The next step is to simply create all the typical things you would for the CSS screen media type. Then below that, place this code. You can replace the .class reference with your own personal CSS. For testing the handheld media type download the Opera web browser since it comes with handheld rendering built into it.

Targeting Specific Media Types With CSS:

@media print { .class { } } @media handheld { .class { } } @media aural { .class { } }


This works on all modern browsers including IE 6 so feel free to integrate it into your site.