# Custom CSS
Cwicly allows you to add your own custom CSS code to blocks to extend the styling elements to fit your specific needs. {% hint style="info" %} Custom CSS is automatically added to the \ of your page. {% endhint %} Cwicly automatically replaces ID and Class placeholders so you don't have to worry about changes if you modify the block ID or Class. ## Add * Select a block. * Open the Advanced tab. * Open the Custom CSS tab. ![](https://lh6.googleusercontent.com/ZzMJYbcFAT64oI06ajtCtqhUBCIeaTb7VjIO32_-yfJFfhHBYqPrkn0gm8xTMvzK13UBEXitiEi_TsNougeOvgc8rar3IhOHHVitf-kdvyd-J9pLj9uqWxOgenhXBCyoieWUuPpzZjRUpZFENEnLN4s) * Enter your CSS code as required in the Code window. ![](https://lh4.googleusercontent.com/wq0IcJT6b3wvxXDadcFbHHjoVlGXU9sIfwEWZYcwdzENOsLFeVv9r45i125_COeygSCy2T8tmgfPERL9zsc188e74UHXwqtRWASv7IVAzO784U04ljjvocnXrnabnGW1R2K2kJNqBxaedBmd3kCYT58) {% hint style="info" %} To target the ID of the block you are editing, use the `#blockid` selector. {% endhint %} {% hint style="info" %} To target the class of the block you are editing, use the `.blockclass` selector. {% endhint %} ## Edit The Edit property allows you to open the CSS Editor in a floating modal. * Select a block. * Open the Advanced tab. * Open the Custom CSS tab. * Click Edit Icon to open the CSS Editor in a modal. * This can be freely moved to where you need it. ![](https://lh4.googleusercontent.com/EnQd0Ai2fNDUOg23zLhYa-INKualEfxqwYX4qn-BquBinIebp9fmZ1j-soxURoaFVV0xXhGH5UWzlIh0EJQarEFhO-qiZjx4J7tmhpv3ofiEXo2JCxbhTz3kaviH4MrCyJlsRXwhRB-M5_SP8niUegM) ![](https://lh3.googleusercontent.com/qi4Na4OOz6JUzN0Uq6gNys7uyvLCi_m1NK_OICraUawPoWYqG1OjB8GmRjHAcprVF849rRzxZbBGKpLFNkQXuy2-fs_nszxvEWHl2XjKCxouYGdiUlJwxgBZKfKJK20jLW5iv12q9gcod9dHqZtp_4w) ### Close CSS Editor * Click "X" icon to close CSS Editor. ![](https://lh6.googleusercontent.com/b6WuEoo3Enoe_978ag5J4g1SzL93TMcVbEGyCFIb2BzJDvKAdhidZlUziLE_QiYa0UchRd-9yoBZjK3WcLYcnn_8akyiNDotJJw685kMeWCqWeuq7ChJENzl1o_eDQyupS4ZP2bdbdsfJnhWq8RIw7g) ## Word Wrap The Word Wrap property allows you to break down long words and wrap them onto the next line. * Select a block. * Open the Advanced tab. * Open the Custom CSS tab. * Input required code. * Click "Word Wrap" icon to enable Word Wrap. ![](https://lh3.googleusercontent.com/OafzQKpLnTQEckbeEnLUGRNi1_8xc29wRDVU4rOdBbrEpHoSQGlM6uuVY4_ue5lqHK_NblLqP6XHerZcl89V4aV5BO0x4HqYVfrmIgvy-ahbV5euLcZRSwn_1o5G75lyqsr7loczzxdg4HNtHO-Y_fA) ## Beautify The Beautify property allows you to reformat your code to improve user readability following certain user-defined conventions. * Select a block. * Open the Advanced tab. * Open the Custom CSS tab. * Input required code. * Click the Beautify icon to beautify your code. ![](https://lh4.googleusercontent.com/uL_-nfjHQZe2msIdECzPGF1U1GGkocViZVRZ4ogdY5u1QdM2lETf7pZ6V6CTK1s4PGez-RwG6JBYRfKitgS4irO7l5mkE33BEMO7WEOdugeIzyrQxtjOcSD2tTm3Yi1-WJVIRBTGQGznekYSpZKWy7M) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.cwicly.com/advanced/custom-css.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.