This page is for application designers who want to know how style settings are applied.

Overview

When applying styles, it is possible to set a value globally, using a shared style, or specifically on the object. PhixFlow applies the CSS in a specific order, with the values set at the object level overriding those set globally. This is explained in the following video.

Where to Apply Styles

Every layout component has a property tab with the sections:

• Shared Styles
• Styles
• CSS Properties.

These sections provide the options where you can set the common style settings. To set other options, use CSS Properties where you can specify a CSS tag and its value.

You can apply:

• object level styles which only apply to the selected component. These styles override any shared styles. However, if you use the styles on multiple components, then decide to change the style, you have to update each item to make the change.
• global level styles are set in one place and shared by multiple components. Use global styles when you want your application to have a consistent look and feel. When you make a change to a shared style, all components that use it are automatically updated. If you make a change to a shared style, remember to test that it looks correct for all components.

To share a CSS property, simply open the shared style and drag the CSS Property to it.

Summary of the order in which styles are applied