Custom CSS, Classes, and Page-Level Styles

Step 1: Use Native Controls First
Start with the element Design controls for typography, color, spacing, border, radius, alignment, and responsive values. Native settings are editable, portable, and visible to the next person. Add custom CSS only when the intended visual cannot be expressed clearly through the supported controls.

Step 2: Scope Page CSS
Open Page Settings, then Code. Use the Builder root token to scope selectors to the current page or template. The supported surface can retain media queries, pseudo-elements, keyframes, and reduced-motion rules while rejecting unsafe markup. Keep selectors narrow and avoid overriding unrelated WordPress administration or plugin screens.

Step 3: Use Classes Deliberately
Add a meaningful advanced CSS class to the exact section or element that needs the rule. Prefer a reusable component name over selectors based on element order. Do not target generated browser structure that may change when blocks are reordered, and do not paste an entire third-party theme stylesheet into one page.

Step 4: Verify and Recover
Save, reopen Studio, and verify the normalized CSS is still present. Check public output at desktop, tablet, mobile, keyboard focus, normal motion, and reduced motion. If a rule causes a regression, use the page history or remove the narrow rule rather than adding a second override that hides the first problem.
