Use the CSS Editor for styling your application with standard web cascading style sheets. It can be found under the tab Other.
Please keep in mind that CSS statements are mainly used for design purposes, not for the basic layout to maintain the responsiveness of UI5.
For the corporate design, we recommend the use of the UI5 theming functionality with the Theme Designer.
UI5 and CSS: Please be aware to use CSS directives mainly for design purposes, not for basic layouting to preserve the responsiveness of UI5. For design purposes, we recommend using the theming functionality of UI5. Therefore you can use the Theme Designer
The syntax for accessing widgets
by ID with CSS is: #<screenId>–<widgetId>
If you want to learn more about CSS, check out the tutorials of the w3 schools or Codecademy.
Step 2 – Style Widgets by Style Class Property
You can assign CSS style classes to a widget via the widget property cssClasses.
- Enter the name of the CSS style class in the property field cssClasses of the widget in the UI Designer (left hand side panel):
Step 3 – Style Widgets by ID
You can assign CSS style classes to widgets directly by using the widget’s ID.
- Define a CSS style class in the CSS Editor using the widget’s ID as class name:
Step 4 – Style Widgets using HTML Element Classes
You can assign CSS style classes to widgets using HTML element classes:
- Check the HTML element class via the browser console (open browser console, right-click at the widget and select inspect):
- Define a CSS style class in the CSS Editor using the widget’s HTML element classes as class name: