org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-3DA126B3-12E2-44C8-A009-8D25E7B3F7E6.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="Customizing style sheets for S60 devices"/><meta name="abstract" content="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."/><meta name="description" content="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."/><meta name="DC.Relation" scheme="URI" content="GUID-2D87333D-5475-4A8F-9E98-1EBF8035EF96"/><meta name="DC.Relation" scheme="URI" content="GUID-9E0EC12F-EF50-4831-B0F4-C588590871D8"/><meta name="DC.Relation" scheme="URI" content="GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-3DA126B3-12E2-44C8-A009-8D25E7B3F7E6"/><meta name="DC.Language" content="en"/><title>Customizing style sheets for S60 devices </title><script type="text/javascript">
function initPage() {}
</script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-3DA126B3-12E2-44C8-A009-8D25E7B3F7E6">Customizing style sheets for S60 devices</h1><div><p>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.</p>
<p>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 <a href="GUID-DD35B82F-CB1F-4F7B-A351-C0417E21D5E4.html#GUID-DD35B82F-CB1F-4F7B-A351-C0417E21D5E4">Creating a CSS file</a>.</p>
<p>For an example of using CSS files to render widget views, see the <a href="http://www.forum.nokia.com/info/sw.nokia.com/id/1c27d9d7-8946-4e26-947d-2b140c454876/Web_Run-Time_AccuWidget_Example.html" target="_blank">AccuWidget Example</a> on Forum Nokia.</p>
<div><h3>Limitations in the Web Runtime</h3><p>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.</p></div>
<div><h3>Using a CSS reset file</h3><p>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. </p><p>The following is a example of a reset.css file.</p><pre class="codeblock">* {
padding: 0;
margin: 0;
border: 0;
} </pre><p>For more information on using CSS files according to device screen size, see <a href="GUID-46BD4E18-092D-4CE2-90CF-91F10B2303B0.html#GUID-46BD4E18-092D-4CE2-90CF-91F10B2303B0">Using multiple CSS</a>.</p></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>