How styling works in ConvertSite

Styling in ConvertSite is one model with two reusable building blocks: a component keeps a selected Component Style Set plus its own overrides, and a Style variable is just a value referenced from either of those. Quick Styles are shortcuts for editing those layers, not a third layer of their own.

What a component stores

Every component holds two style records: a styleset it is connected to, and a set of overrides that apply only to that component. Overrides are grouped by element (for example Wrapper or Label) and keyed by CSS property, breakpoint, and state, so you can change a single property for one state on one component without touching the styleset.

Quick Styles are controls, not a layer

Quick Styles are the convenience fields at the top of the Style tab (labeled Quick styles in Site and Embed apps, Styles in Document apps). Each one maps to a CSS property on a target element, and editing it writes into whichever layer you are currently editing. In normal component mode it updates the component's overrides; in styleset edit mode it updates the styleset itself. Clearing a Quick Style field removes the override so the styleset value applies again, instead of saving an empty value.

Component overrides win over the styleset

For the same element, CSS property, breakpoint, and state, the component's override replaces the matching value from its selected styleset. Rendering merges the layers in this order: the selected styleset, then internal element styles, then the component's overrides, then dynamic overrides driven by component properties. So a value you set directly on a component always beats a styleset value in the same slot.

Style variables are values, not a layer

A Style variable is a reusable design value (a color, font size, spacing, border, or shadow) that you connect to a style property. Connecting a variable stores the CSS reference to it — for example a color reference — in whichever layer you are editing, the same way a literal value would be stored. Variables have no priority of their own: the entry containing the reference wins or loses by the same merge rules as any other value.

Where a change lands depends on your editing mode

The same control writes to different records depending on what you are editing. In normal component mode, editing a style property or connecting a variable updates the component's overrides. In styleset edit mode, the same actions update the styleset's elements. A component override for the same slot still wins over the styleset value, even when the styleset value is a variable reference.

Component stylesets: create, apply, and manage reusable appearance sets.
Style variables: create design values and connect them to component styles.

Was this helpful?