Servoy provides support for cascading style sheets to control the appearance of fonts and other objects (including checkboxes, buttons, etc.). It supports a subset of CSS 2.1; however CSS use in Servoy is limited to styling and not positioning (which is done through the Forms Editor).

Stylesheets are stored in the solution's Resources project. This chapter describes how to create a new style sheet, manage your stylesheets, and use some of the features of the Script Editor.

Creating a New Stylesheet

To create a new stylesheet:

1. In Solution Explorer under the Resources node, right-click on Styles and select Create new style from the context menu. (Alternatively, click on the Styles button on the mini-toolbar of the contextual list.)
2. Enter a name for the new stylesheet.
3. Click Next to select the option to fill the new style with sample content, if desired.
4. Click Finish. 
   • The Style Editor window will open, allowing you to edit the stylesheet. 
   • The new stylesheet will also appear on the Solution Explorer contextual list along with the other stylesheets.

Managing Your Stylesheets

The Solution Explorer allows you to view, open, and delete your style sheets. 

To open an existing stylesheet:

1. Expand the Resources node, if it is currently collapsed.
2. Click on Styles. A list of stylesheets will appear in the contextual list (the bottom part) of the Solution Explorer.
3. Double-click on the desired stylesheet to open. The stylesheet will open in the Script Editor view. Alternatively, you can:
   • Right-click on the selected stylesheet and select Open Style.
   • Use the Open icon (left in image below) on the mini-toolbar at the top of the contextual list.
     

To delete an existing stylesheet:

1. Expand the Resources node, if it is currently collapsed.
2. Click on Styles. A list of stylesheets will appear at the bottom part of the Solution Explorer.
3. Select the stylesheet to be deleted. 
4. Delete the stylesheet using one of two options:
   • Right-click on the selected stylesheet and select Delete Style.
   • Use the Delete button on the mini-toolbar.
5. Click OK to confirm delete in the confirmation window that appears.

Style Editor Features

The Style Editor contains the following special features:

• Code completion. Common CSS properties are suggested as you start typing.
• Color picker and Font chooser. The Choosers toolbar is activated in the IDE toolbar area when the Style Editor is open, allowing visual color selection via the color picker (left in image below) and font selection (right) via the Fonts dialog box.
  

• Outline View. The outline view provides a streamlined view of the stylesheet, allowing you to quickly jump from one selector (class/id) to another, or even from one specific property to another. The selectors are shown as the root nodes in the order that they appear on the stylesheet; Users can click on the node to expand the tree, showing properties under the selector.

Other common scripting features can be accessed via the context menu in the Style Editor. These include Undo/Redo, Revert File (to the last saved version), and file comparison.