# Creating a CSS file

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.