Customizing style sheets for S60 devices

Use cascading style sheets (CSS) to define how pages look and feel. Separate structure from presentation to be able to use the same structure in different contexts and to reformat it with an alternative CSS for different purposes, such as smaller screen sizes and different media types. If you reuse the same CSS resource rules for multiple views, you can make changes to the entire application with one update.

The CSS defines the size, margins, color, background color, and other characteristics of each HTML element. You can either embed CSS information in the HTML file or import it from an external stylesheet. For more information, see Creating a CSS file.

For an example of using CSS files to render widget views, see the AccuWidget Example on Forum Nokia.

Limitations in the Web Runtime

Web Runtime (WRT) does not support the CSS opacity parameter. Use transparent PNG images to create similar functionality, for example, to stretch images across the screen. However, note that partial transparency can consume lots of processing power on the mobile device.

Using a CSS reset file

Use a reset CSS file to adjust the CSS to a more accurate layout. This also makes the CSS easier to debug. Store the CSS file in the project folder and refer to it from the HTML file.

The following is a example of a reset.css file.

* {
+   padding: 0;
+   margin: 0;
+   border: 0; 
+}

For more information on using CSS files according to device screen size, see Using multiple CSS.