Skip to content

Global CSS

Global CSS

Global CSS refers to stylesheets that apply across your entire project. Any CSS classes defined in a global stylesheet can be used anywhere within the project.

You can organize your global styles by creating multiple stylesheets. When you click “Add New”, you create a new global CSS file—however, behind the scenes all global stylesheets are combined into a single file and appended in creation order.

All rules remain active; if the same selector/property is defined more than once, the rule coming later in the combined stylesheet takes precedence for that property.

If you’re just getting started, consider checking out the Starter Project for examples and best practices.

CSS Priorities

CSS can be defined in multiple places across the Web Builder. Important: rules from every source are active simultaneously — priority only matters when the same selector/property (or equivalent specificity) is defined in more than one place. In that case the higher-priority source determines the final computed value.

CSS Priorities for Page Layouts

Page layouts use CSS defined in:

  • The CSS editor inside the Page Layout (A)
  • Global CSS (B)

Priority order: A > B
(This means both A and B rules apply, but when the same selector/property is defined in both places, the value from A is used.)

CSS Priorities for Blocks

Blocks inherit and accumulate styles from multiple places. All of the following sources are active; priority only determines which value is used for a conflicting declaration:

  • The CSS in the Block's Theme that the block is using (A)
  • Global CSS (B)
  • The CSS in the Page Layout (C)
  • The CSS editor inside the Block Editor (D)

Priority order: A > B > C > D
(Example: if .card { padding: 20px } exists in Global CSS and .card { padding: 16px } exists in the Block's Theme, both rules are present — the theme's 16px is the one that will be applied because A has higher priority than B.)

Icons, buttons, and links are individual elements nested inside blocks and pages. Again, all rules are active; priority decides the winner when the same declaration appears in multiple places:

Priority order: A > B > C > D > E
(Example: if a button has color: #333 from Global CSS and color: #007bff from the element’s own CSS editor, both rules exist but #007bff will be used because the element’s editor has the highest priority in this list.)

Additional notes

  • All rules are active. Priority only matters for conflicting declarations affecting the same property on the same element (or equivalent selectors).
  • Specificity & importance still apply. A rule with higher selector specificity or a rule marked !important can override otherwise higher-priority sources if the CSS cascade and specificity rules dictate so.
  • Order within the same source matters. For example, later Global CSS files (when combined) will take precedence over earlier ones for the same selector/property.
  • Best practice: place page- or element-specific tweaks as close to the element (higher priority) as makes sense, and keep broad defaults in Global CSS to avoid surprises.