> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/blocks/styler.md).

# Styler

The `styler` block is a useful block in which you can add and save the styles you want and then apply them to another block as a virtual class.

This comes in hand when you are using the Cwicly Cloud Design Library and want to add your customisations quickly and efficiently.

<figure><img src="https://lh6.googleusercontent.com/Yn6zrGcuQoXf6sMppHJPThK6fBPjC5r1LjKTcx5pMbIIRFmc1bOtzvhhXbrjIk1PHqIHAQC4C2bXoLhyQiPgMYvIQybKFzokxItGBLz0Y4EDbxsYD3P9WPtwFwQ8ExKjWccNnR7Q98PHNQFkACZDAw3NlwyrVOwj3OrRm-3wxRbwZOqZEi6mHt9cy8yjNw" alt=""><figcaption></figcaption></figure>

## Design Styler&#x20;

Add a `styler` block using the block inserter.

<figure><img src="https://lh4.googleusercontent.com/qJPlHAuL76JCUWasjHE0dd1tphd9jbOnUMbp2Cwi8aTHjiiYjzYR3B7mJhHqu_G-wjam9jm1c4eFrzXWr_JdRVpzbIBwWmVETI9Ppdan8fKFaf9etHmvFznhUy0pBzwnlPo86D9z4GH_8c3n_1i7LMrReHEYND_tdXvD94UafqGYEebFdpclqvYjIWOeGQ" alt=""><figcaption></figcaption></figure>

Add the styles you wish to save in the `styler` block (typography, colours, borders, etc).

<figure><img src="https://lh3.googleusercontent.com/CZofi0etUxGFSd_iLeO-tA-D3N3IYGg3O5luZuD2xjqONypk6jdVYORweBEYGT8Q2kzfl8qdN_nftEe_3F0fDhYoYmiYtOZz74EPUB-A0uD2W-aVUWahmhX11AaEvVkrBuPIAAoQdcRze0U84SRH0jksELaxo0oP5FFrT3-csP3Uac-zFPFj1PG5M4LY2Q" alt=""><figcaption></figcaption></figure>

With the `styler` block selected, copy the class name.

<figure><img src="https://lh6.googleusercontent.com/TGBuThdLIic6sdwWBMcIofokxf8GMLzTNkCfVMZvXaHSBvjP3ZQDEyilKi8XZ0w0FYMpHKNVGoWz5ADp52Hj3sq6gbZOFx0islbV6bpIIJ_B9uE159wvTXLpGo4nGAYJIu15yB65v4Gwtg0wxcRLH82G9YSKJtO3SV1EdOnrvdNTpSIQj0MwZ2XeKrIW6A" alt=""><figcaption></figcaption></figure>

Select the block to which you wish the `styler` block styles to be applied.

<figure><img src="https://lh3.googleusercontent.com/N75hheWMez6qYfyz6Ss1cbMEseknKtQCinoAVIIqoJ6NnExPxCC7vfhmXDlR7_qwmpg_XYKnjIVJQLRpK-N5Hvh-gEcCE_rXlv4gafwv7JoCl49thZVsF6tnGviwsu6dDKn2BRf_UEVQ1SCLheBQ1btQujn0IN6xN-C5-B0CQiJLDwvW2SfWgtsWZKkRZQ" alt=""><figcaption></figcaption></figure>

Add the `styler` block class name as a virtual class and the styles will be applied as usual.

<figure><img src="https://lh3.googleusercontent.com/qAthbEeqV1_RP9BPzsglSwKzfTcIGVL0pv1pO7GDIEcv9ZmNF2R1U6YWsceinC9k8LUkxKEIyb9fhEBDty3AxH5nvIe-kRnIdfv5z2l3j5YGBn5WH9D3TH6q7La8cvBtKgD2C68ICMsA2UfbtAPw2J1S9g0eAOklj7YTNLvu1o0FmgH0gltp9rBqzCEtZQ" alt=""><figcaption></figcaption></figure>
