# 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)