CSS widget
You use the CSS widget to refer Cascading Style Sheets (CSS) resources in your pages. The widget provides capabilities for referring both inline styles and references to CSS files into the page <head> tag.
After you place the CSS widget on your page you configure which CSS files to include. To do this, click Edit button in the upper-right corner of the widget. The following sections describe the properties and settings you need to define.
Add CSS
You can either wrte a new CSS file from scratch or link to an existing CSS file. Choose one of the options:
- Write CSS
Directly type the CSS rules into the code area, so that it is included in the HTML <head> tag. For example:
body { background: #fff; font-size: 12px; }
NOTE: You do not need to add a <style> tag, since it is automatically added.
- Link CSS file
Do one of the following:
- Select a CSS file from your file system by directly typing the path to the CSS file
- Click Select to browse the file system.
You can choose a file from the your web application folder and its children.
Select media type
Under Media, select the media type that refers the CSS file:
- All
Includes all types of media.
- Selected media types...
Choose from the following options:
More options
Expand More options section to optionally add a description for the referenced CSS file. This description is displayed only when pages are in edit mode, so that you easily distinguish CSS files.
Model settings
Model settings display all properties directly bound to the CSS widget model. Access these properties by clicking the Model button in Advanced settings.
-
Description
Gets and sets the description of the CSS that is referenced. This field is for your convenience only.
-
InlineStyles
Gets and sets inline styles that are displayed in the code area when the widget is in Write CSS mode. The content of this field is rendered inside <style> tag, in the <head> section of your HTML file.
-
MediaType
Gets and sets the media types to which the CSS is applied.
-
Mode
Defines the supported ways to refer CSS through the widget. Choose one of the options:
- Inline
This is the default option. You use it when you want to enter CSS directly into the code area. If you enable this mode, any URL selected through Link to CSS file will not be added.
- Reference
You use this option for referring resources from your file system. If you enable this mode, any CSS typed directly into Write CSS code area will not be included.
-
ResourceUrl
Gets and sets resource URL which is referenced in the page <head> tag. This ResourceUrl is used only when the CSS widget is in Reference mode.