For styling applications Servoy supports the use of HTML cascading style sheets (CSS 3.0). In order to allow a more powerful way to interact with CSS syntax Servoy also implements the Less files compiler.

...

Structure of the Style Sheet

A style sheet for Servoy has basic style definitions and style definition classes.

The style definitions for Servoy are as follows:

• form
• label
• button
• field
• ... and more

Under any of these style definitions, the developer can create many style definition classes. For example, the label style definition could have the style definition classes label.title, label.small, and label.bold.

Each definition and definition class can have one or many properties associated with it. Properties specified within the style definition are inherited(cascaded) to any style definition class under it. Study the example below

label {
	color: #ffffff;
	border-style: solid;
	font: bold 10pt Verdana;
}

label.mytext {
	color: red;
	vertical-align: middle;
	border-width: 1px 1px 1px 1px;
	border-color: #111111 #111111 #111111 #111111;
	margin: 2px 2px 2px 2px;
} 

Notice that the border style and font are not modified in the mytext class. This means if a label were specified to use mytext for its style, it would be bold, 10pt, Verdana because that is what is specified in the parent style definition. The color would be red (not black) because that was overridden by the mytext definition class.

Webinars

Servoy periodically produces Technical Webinars targeted to developers covering a broad range of topics, from new features to new capabilities to best practices. The following webinars are focused on the application styling:

...

1. Click on Styles under the Resources project in the Solution Explorer and do one of the following:
   1. Select the style desired (shown in the Solution Explorer list view) and click on the Open style button in the Solution Explorer list view toolbar.
   2. Double click the style desired.
   3. Right click on the style desired and select Open style from the menu.
2. The style will open in the center of the Workspace in an editor view.

Structure of the Style Sheet

A style sheet for Servoy has basic style definitions and style definition classes.

The style definitions for Servoy are as follows:

• form
• label
• button
• field
• check
• radio
• combobox
• tabpanel
• portal

Under any of these style definitions, the developer can create many style definition classes. For example, the label style definition could have the style definition classes label.title, label.small, and label.bold.

Each definition and definition class can have one or many properties associated with it. Properties specified within the style definition are inherited(cascaded) to any style definition class under it. Study the example below

label {
	color: #ffffff;
	border-style: solid;
	font: bold 10pt Verdana;
}

label.mytext {
	color: red;
	vertical-align: middle;
	border-width: 1px 1px 1px 1px;
	border-color: #111111 #111111 #111111 #111111;
	margin: 2px 2px 2px 2px;
} 

...

1. .

Using Styles in Forms

In order to use a style sheet, the style sheet must be applied to a form. Solutions do not have a style sheet applied, only forms. Styles for the elements on a form are dependent on the style sheet applied to the form.

...