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 pages, you can make changes to the entire site 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, see the AccuWidget Example on Forum Nokia.
Web Runtime (WRT) widgets do 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.
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;
} HTML and CSS support using different style sheets for different types of media. You can specify that sections of CSS apply only to particular media types, such as mobile devices (handheld). You can use media queries to apply styles based on screen height and width, aspect ratio, or resolution, for example. The device-width media feature describes the screen width and the device-height feature describes the screen height.
For more information about the available media types and features, see the W3C Media queries document.