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:
Importing a style sheet that is included in the widget package
Use the <style> tag and the @import directive
as follows:
<style type="text/css"> @import "Stylesheet.css; </style>
Linking to a style sheet that is included in the widget package
Use the <link> tag as follows:
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
Importing a style sheet from a remote location
In this scenario, the CSS file is not included in the widget package.
Specify the URL of the style sheet source inside the <style> tag
as follows:
<style type="text/css"> @import url(http://www.widget.server.com/Stylesheet.css); </style>
Linking to a style sheet that is stored in a remote location
In this case, the CSS file is not included in the widget package. Specify
the URL of the style sheet source in the href attribute of
the <link> tag as follows:
<link rel="stylesheet" type="text/css" href="http://www.widget.server.com/Stylesheet.css" />
Note: When linking to or importing external CSS files from a remote location,
specify the AllowNetworkAccess key in the info.plist file as true to allow the widget to connect to the network.
For more information on creating CSS files, see the World Wide Web Consortium (W3C) pages.