⬛ CSS

⬜ CSS

The CSS block allows you to inject style code (Cascading Style Sheets) to personalize the appearance of elements in an application, offering advanced possibilities such as rounding, shadows or complex animations.

This block is particularly useful for users wishing to go beyond the limits of predefined styles in Célestory and apply precise visual modifications.

📥 Entries

in (Trigger): Triggers the application of the CSS code.
style (Text): Contains the CSS code to execute. A built-in mini-editor makes typing easier.
clear (Boolean): If enabled (True), clears previously injected CSS styles before applying new code (disabled by default).

📤 Outings

out (Trigger): Activates immediately after injecting or clearing the CSS style, allowing the flow to continue.

💡 Example of use

Scenario: Customizing a button with an animation

The user wants to change the appearance of a button in their application to make it more dynamic.
It places the CSS block in its graph, after displaying the button concerned.
In the style entry, he writes the following code:

   .my-button {
     background-color: #4CAF50;
     border-radius: 12px;
     transition: transform 0.3s;
   }
   .my-button:hover {
     transform: scale(1.1);
   }

The block immediately applies the style to the button, which turns green with rounded corners and animates on hover.
The flow continues to the next step, where the user can test the interaction with the button.

⚙️ Technical Details

Styling management: The CSS code is injected into the web view DOM and remains active until another CSS block with clear enabled is executed.
Targeting of elements: The CSS selectors must correspond to the classes or IDs of the elements generated by Célestory (ex: .celestory-button).
Limitation: Applied styles may be overwritten by more specific or later CSS rules in the flow.

Updated on: 04/03/2026

Was this article helpful?

Thank you!