What is the prefered way to keep css seperate for Portrait and landscape mode for iPad?

When we make iPad specific website ( I'm making different website for desktop users) and we also want to write different CSS for Portrait and landscape mode, what method you would prefer?

First method

We can keep single CSS file with only one http request

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

and use media queries inside to keep the code separate

/* CSS for landscape here */
开发者_开发问答
#wrapper {width:1024px}

/* CSS for portrait here */

@media only screen and (orientation:portrait){
#wrapper {width:768px}
}

Second method

We could use 2 CSS files with 2 http request

<!--CSS for landscape-->
<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">

<!--CSS for portrait-->
<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">

Which method you would prefer and and if you have any suggestion to improve please tell.

Note: I'm making separate website for Tablets, it's not for Desktop and Mobile

Edit 2: *In first method is it better to specify Landscape too or it's not necessary.*

Compare this with first method code

/* CSS for landscape here */

@media only screen and (orientation:landscape){
#wrapper {width:1024}
}

/* CSS for portrait here */

@media only screen and (orientation:portrait){
#wrapper {width:768px}
}

and Is it ok to remove style="text/css" from css link?

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

And should I keep media="all" in link or it's not necessary?

---

I would prefer the first one because the whole CSS gets cached on the first request. With the second one, the CSS for the other mode will need to be downloaded so the screen orientation change will not be as smooth as with the first one.

---

I prefer the first method myself because I like having everything in one place. As for the necessity of style="text/css", you don't need to have it, at least with the HTML5 doctype, but I think it remains as a best practice thing. The same goes for media="all".