org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-DD35B82F-CB1F-4F7B-A351-C0417E21D5E4.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="Creating a CSS file"/><meta name="DC.Relation" scheme="URI" content="GUID-A942935B-ACF6-451C-8383-874BEEC52F1A"/><meta name="DC.Relation" scheme="URI" content="GUID-C294F32D-CAC7-499C-AD4B-701B9AB57ACA"/><meta name="DC.Relation" scheme="URI" content="GUID-1EFD7043-E9B8-4B4E-9EA6-A20B3EECC14A"/><meta name="DC.Relation" scheme="URI" content="GUID-85179E6B-E915-4D96-A5D1-D17D7C7180C7"/><meta name="DC.Relation" scheme="URI" content="GUID-0E3095DB-03FF-4240-83F2-6D876AD2083A"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-DD35B82F-CB1F-4F7B-A351-C0417E21D5E4"/><title>Creating
a CSS file </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-DD35B82F-CB1F-4F7B-A351-C0417E21D5E4">Creating
a CSS file</h1><div><p>It is recommended that you create a separate CSS file for controlling
the style and layout of your widget. A widget can have as many CSS files as
needed. The Web Runtime supports CSS Level 2 syntax and data types. There
are four ways to use an external CSS file through the widget's main HTML file:</p><ul><li><p>Importing a style sheet that is included in the widget package</p><p>Use the <code><style></code> tag and the <code>@import</code> directive
as follows:</p><pre class="codeblock" id="GUID-D17980B1-41AB-461A-A687-8AC7270F2C33"><style type="text/css"> @import "Stylesheet.css; </style></pre></li><li><p>Linking to a style sheet that is included in the widget package</p><p>Use the <code><link></code> tag as follows:</p><pre class="codeblock" id="GUID-21BB364D-DC77-4101-BC76-10BE99B3B592"><link rel="stylesheet" type="text/css" href="Stylesheet.css" /></pre></li><li><p>Importing a style sheet from a remote location</p><p>In this scenario, the CSS file is not included in the widget package.
Specify the URL of the style sheet source inside the <code><style></code> tag
as follows:</p><pre class="codeblock" id="GUID-8189E391-1EDA-4822-B6EA-378E2E8115FF"><style type="text/css"> @import url(http://www.widget.server.com/Stylesheet.css); </style></pre></li><li><p>Linking to a style sheet that is stored in a remote location</p><p>In this case, the CSS file is not included in the widget package. Specify
the URL of the style sheet source in the <code>href</code> attribute of
the <code><link></code> tag as follows:</p><pre class="codeblock" id="GUID-A13E8F39-8095-4694-ADE0-239984576998"><link rel="stylesheet" type="text/css" href="http://www.widget.server.com/Stylesheet.css" /></pre></li></ul><div class="note"><p><strong class="note_title">Note: </strong>When linking to or importing external CSS files from a remote location,
specify the <code>AllowNetworkAccess</code> key in the <a href="GUID-BBA0299B-81B6-4508-8D5B-5627206CBF7B.html#GUID-BBA0299B-81B6-4508-8D5B-5627206CBF7B"><code>info.plist</code></a> file as <code>true</code> to allow the widget to connect to the network.</p></div><p>For more information on creating CSS files, see the <a href="http://www.w3.org/Style/CSS/" target="_blank">World
Wide Web Consortium (W3C)</a> pages.</p></div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>