Cascading Style Sheets (CSS) is a language for describing how content is presented. Its purpose is help separating content (HTML) from presentation. OutSystems uses the Silk framework (except for the themes based on London theme) and each theme has its own CSS. You can either add new styles or modify the existing ones by copying them from the base theme.
These elements have their own CSS which you can edit:
- Web Screens and Emails
- Web Blocks
- Widgets (complex widgets have more than one style)
Editing and applying CSS
CSS is edited in Style Sheet Editor. You can open it by double-clicking Style Classes property in Properties Pane when you edit an element that can have CSS.
Enter the classes of the widget into Style Classes and they will be applied to the selected element. The styles classes are entered like this:
- In web applications, without quotes and separated by a space (
- In mobile, with quotes and separated by a space (
Not all styles have the same priority. Use the order Service Studio imports the style sheets to calculate how browsers will apply your styles. Note that inline styles can be used as well.
- System style sheet for Container widgets in the Grid
- Web Blocks style sheet
- Theme style sheet, which also includes a base theme (if specified)
- Web Screens or Emails style sheet
- Theme extra style sheet, with the Grid settings defined in the Theme properties
If you must use the inline CSS you can create it by adding
style in the Extended Properties and then entering the CSS rules (for example,
ID attribute and classes
You can specify id and classes of the HTML element in the Properties Pane. Enter your classes without quotes and separated by a space.
- The Name field corresponds to the
idattribute of the element.
- The Style Classes field correspond to
classattribute of the element.
OutSystems uses a high-level grid system. If you specify the number of columns in the Theme grid settings, the width of elements can be expressed in columns. In some properties (for example, Margin Top), Service Studio converts
Auto indicates the values are calculated automatically.
@import CSS at-rule in Style Sheet Editor to import style rules from other locations.