UI Controls Styles

The Cascading Stylesheet (CSS) helps you control the look of pages and elements of your application. You can create multiple classes and define the class attributes as required. Using the classes that you created, you can apply different styles to the UI elements and pages.

Perform the following steps:

1. Navigate to the UI Model that you want to update.
2. Navigate to the view within your UI model that you want to update.
3. Click the Styles tab from the toolbar that appears on the right.
4. Select the UI element that you want to update. Displays some or all the following options that are applicable to the selected element.
• Classes: The class attribute allows to define same style for different elements. All elements with the same class attribute have the same formatting and style. You can create multiple class attributes and apply different styles for different elements.
• Select a class based on which you want to apply the styles to the selected element.
• General: The general attributes include the settings such as float, display and position of an UI element on the page.
• Flex: The flex property sets the flexible length on flexible items. If the UI element is not a flexible item, the flex property does not have effect.
• Dimension: The dimension attributes include the settings such as width, height, margin and padding of an UI element on the page.
• Typography: The typography attributes include the settings such as font family, font size, font weight, letter spacing, color, line height, text align and text shadow.
• Decorations: The decorations attributes include the settings such as border radius, border width, border color, background and background color.
• Extra: The extra attributes include the settings such as transition, perspective and transform.
5. Apply the styles as required for each UI element.

Note: If you want to apply different styles for the same type of element, you must create a separate class.

6. Click Save.

The styles are successfully applied to UI elements.