About Style Sheets

In Service Studio a Style Sheet is where you define Styles for the appearance and behavior of your widgets.

Defining Styles

Use the Style Sheet Editor to edit and define styles in style sheets of the following elements:

Themes (used by Applications, eSpaces, and Web Flows)
Web Screens
Emails
Web Blocks

Examples of styles:

.Heading1 {

color: #333333;

font-size: 20px;

font-weight: bold;

padding-bottom: 4px;

}

.Text_Error {

color: #c7331f;

}

Styles Scope

When a style sheet is set for an element, all styles in the style sheet are available for applying to widgets in the scope of that element, namely, the scope of:

Application, eSpace, or Web Flow: the Style Sheet is the one set for the Theme of the element;
Web Screen, Email, or Web Block: the Style Sheet is the one set on the element properties.

Normally, you define styles in the style sheet of your application and, additionally, you define new widget styles or redefine existing styles in style sheets of specific elements like, for example, a particular web screen of the application.

The definition of the style that is used is the first one found in:

The style sheet of Web Screen or Email;
The style sheet of Web Block;
The style sheet of Theme of the Web Flow;
The style sheet of Default Theme of the Application or eSpace.

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.

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,...];

Examples:

@import "thin.css";

@import url("thin.css");

@import url("fineprint.css") print;

@import url("bluish.css") projection, tv;