Mobile Style Sheets

There are several different ways to detect and display proper content for a your mobile ready website.
The simplest make over is to create an alternate styles for your mobile site.
1) Include in your of the website following declaration:
<link rel=”stylesheet” type=”text/css” href=”mobilestyle.css” />

And change the mobilestyle.css to your customized mobile style sheet.
There in one thing to remember here, if you already declared/changed the properties of the html elements in other non-mobile css file you will need to overwrite them to get the desired effect.
2) Add to your existing css file the following:
/*--- Main CSS here ---*/

/*————————————*\
IPHONE
\*————————————*/
@media screen and (max-device-width: 480px){
/*— iPhone only CSS here —*/
}

Resources: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/