Two Style Sheets

[phpDave]

Hi, I have 2 style sheets for my site. One is for small screen and the other is for large screen. Here is the code.

<script type="text/javascript">
if (screen.width >= '900'){
	document.write('<link href="main.css" rel="stylesheet" type="text/css" />');
}else {document.write('<link href="small.css" rel="stylesheet" type="text/css" />');
}
</script>

What I want to do is have the small.css as the default style sheet in case java script is disabled. Currently I have the following above the script tag.

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

It works fine if java script is disabled. My question is, is this a correct way to do this?
Thanx.

[drjohn]

yes

Set the small screen css first in the normal way. Then use javascript to over ride this with the wide screen version. No need to mention the small one in the javascript.

[phpDave]

Thank you very much, I wasn't sure.