In Service Studio the Style Sheet is where you add Styles that define the appearance and behavior of widgets.

Editing Styles

To edit styles for your widgets use the Style Sheet Editor, which includes auto-complete and syntax highlight.

Each of the following elements has its style sheet where you edit styles:

  1. Themes
  2. Web Screens
  3. Emails
  4. Web Blocks

This means that you may decide the scope of the style, from a more generic scope to a very specific one.

Examples of styles:

Applying Styles

Apply a style to a widget simply by selecting that widget and choosing the style in the widget properties.

See more about Applying Styles.

Style Sheet Order

Service Studio imports the style sheets in the following order:

  1. System style sheet for Container widgets in the Grid;
  2. Web Blocks style sheet;
  3. Theme style sheet, which also includes a base theme (if specified);
  4. Web Screens or Emails style sheet;
  5. Theme extra style sheet, with the Grid settings defined in the Theme properties.

As such, all web screens will have the following declaration:

Special Considerations Regarding Web Blocks

In order to ensure that your applications have a consistent look and feel, the style sheet of web blocks is the first to be imported, when generating the HTML. This way, you can reuse web blocks in several eSpaces, while retaining the ability to customize their look and feel, making them consistent with the application they are being used in.

To customize the look and feel of referenced web blocks, simply redefine the styles of that web block, either on the web screens that is using the web block, or the theme of the eSpace.

Importing Styles from External Style Sheets

If you have styles defined in style sheets external to Service Studio, you have to use the @import rule to get them.

The @import rules must be written at the beginning of a Service Studio style sheet using the following syntax:

@import [url(]<style sheet name>[)] [?media,...];


See Also

Style Sheet Editor | Applying Styles