Hi Suraj,

The styles have different priorities and the order Service Studio imports the style sheets affects how the browsers apply them. The last style to be applied has the highest priority.

1. System style sheet for Container widgets in the Grid.
2. Block style sheet.
3. Theme style sheet, which also includes a base theme (if specified).
4. Screen or Email style sheet.
5. Theme extra style sheet, with the Grid settings defined in the Theme properties.
6. Styles that Service Studio generates when you use Styles Editor.
7. The inline style you define in Attributes or Extended Properties.

https://success.outsystems.com/documentation/11/developing_an_application/design_ui/look_and_feel/cascading_style_sheets_css/

Hii 

Kindly refer this link

https://www.outsystems.com/forums/discussion/20463/how-to-control-css-load-order/

Thanks

Hi @Suraj Borade,

Suppose you have one class text-primary which is define in theme module of your application.

By default your theme CSS apply on your elements.

If this Class redefine again redefine in Block level then Block CSS will be applicable and theme CSS will be overwrite.

If the same class again redefine in the screen level then Screen level define CSS will be applied on Element 

Note1: In above all cases there is not inline CSS included in any above level an element have a inline CSS then Class level CSS will be overwrite by inline CSS

Note2:  If in defining/redefine class at any level (theme/block/screen) if any property have !important then that !important value will be apply on that element and rest of the properties will behave based on above explained order.

Thanks & Regards,

Sanjay Kushwah