When multiple style classes exist in a Web Block, Screen, and Theme, which one takes precedence?

The precedence of style classes in OutSystems is determined by the hierarchy of where those styles are applied. In this case, the style class defined in the Screen takes precedence over the style classes from the Web Block and the Theme.

When determining which CSS rules to apply, the browser uses a system known as the "cascade" where rules can be overridden based on their source order and specificity. Since a Screen is a more specific context than a Theme or a Web Block, the styles defined in a Screen will override those defined in a Theme or a Web Block if they target the same elements.

The cascading nature of CSS means that styles applied at the most localized level (in this case, the Screen) will take precedence over those that are more globally applied (from the Theme) or defined at a lower context (in the Web Block). This behavior is fundamental to ensure that developers have control over the appearance of their applications by specifying styles that are relevant to the particular screens where they are needed.