All of us, who work in web development, sometime had (or will have) to figure out how to set a Cascade Style Sheet file to target some devices. Some time ago that was about fixing IE6 and IE7 or even targetting IE8. Nowadays we have to start developing for Mobile Devices such as Apple ones: iTouch, iPad, iPhone.
And we already knew a way to do that and was by:

 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
 

Now, I guess that will not behave as expected. With the actual large range of products by Apple (and variations) you may need to set a particular one for each device. So how we do that? Well it's pretty simple, we will target the device by its Dots Per Inch. And the code is really clean:

 
<!-- iPod Touch and 'old' iPhones have 163 dpi -->
<link type="text/css" rel="stylesheet" media="screen and (resolution: 163dpi)" href="iphone.css" />
<!-- iPad has 132 dpi - UPDATE: it doesn't work (please see above solution)
<link type="text/css" rel="stylesheet" media="screen and (resolution: 132dpi)" href="ipad.css" />
 -->
<!-- iPhone 4 has 326 dpi -->
<link type="text/css" rel="stylesheet" media="screen and (resolution: 326dpi)" href="iphone-4.css" />
 

You can get also the orientation of device. To do such thing you should add (orientation:portrait) so it may looks like this:

 
<!-- iTouch narrow -->
<link type="text/css" rel="stylesheet" media="screen and (resolution: 163dpi) and (orientation:portrait)" href="iphone.css" />
<!-- iTouch wide -->
<link type="text/css" rel="stylesheet" media="screen and (resolution: 163dpi) and (orientation:landscape)" href="iphone.css" />
 

Thanks to Jesse for the update! And just in case you need a small introduction to "media" targetting check out about Responsive Web Design.

Due to resolution: 132dpi doesn't target iPad at all, you should use:

 
<link type="text/css" rel="stylesheet" media="only screen and (device-width: 768px)" href="iphone.css" />