# Using multiple CSS

If the difference in screen size on the target devices is large (for example, 240 x 320 and 360 x 640), you can use separate CSS files to specify the user interface for each screen size. This also allows you take touch support into consideration. On touch devices, make buttons, text boxes, and other screen controls big enough for users to select them with fingers. On other devices, screen controls can be smaller, because users use the five way navigation pad to move between them.

Use JavaScript to determine which CSS file to select on a particular device.

For an example of using multiple CSS, see STEW: supporting different screen sizes.

### To use multiple CSS

1. Create CSS files that specify styles for different screen sizes.

   For example, `style.css` to render views on 360 x 640 screens and `style_small.css` on 240 x 320 screens.

2. Add references to the style sheets to the `main.html` file.

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

3. Create JavaScript to select the style sheet according to screen size:

       // Set the correct stylesheet depending on whether we are running
       // on bigger or smaller screens.
       Helper.applyCorrectStyles();

       applyCorrectStyles: function() {
       	var largeScreen = Helper.isLargeScreen();

       	document.styleSheets[0].disabled = !largeScreen;
       	document.styleSheets[1].disabled = largeScreen;
       }

4. Create JavaScript to determine screen size:

       isLargeScreen: function() {
       	var size = this.getScreenSize();
       	return ( size.height > Helper.SMALL_SCREEN_TRESHOLD );
       }

       Helper.SMALL_SCREEN_TRESHOLD = 320;