# CSS Injects custom CSS into the page. The styles you configure are added to the document `` when the page renders, and removed when it unmounts. Use this for page-level visual customisation that the theme builder and component-level styling don't cover — keyframe animations, specific element overrides, or styling for the contents of an HTML block. ## Available in * All module types ## When to use * Adding a keyframe animation (e.g. a pulsing badge or sliding banner) the standard blocks don't support. * Overriding a specific element's appearance on one page only — without touching the global theme. * Styling the contents of a sibling HTML block (the HTML block doesn't have its own styling controls). * One-off tweaks during prototyping. For long-term styling needs across many pages, use the theme builder. * Styles that should apply across every page in a specific workflow — add CSS in the workflow's own settings instead of dropping this block onto each page individually. For colour, font, and layout changes that should apply across the whole portal, use the theme builder instead — it's designed for that and your changes will be preserved through upgrades. ## Settings | Setting | Description | | --------------- | ------------------------------------------------------------ | | **Title** | Identifier shown on the editor card. Not visible at runtime. | | **Description** | Short note for the editor card. Not visible at runtime. | | **CSS Content** | The CSS rules to inject. | ## How it works When the page renders: 1. A unique `