Checkboxes for CSS Desclarations & Noneditable/Editable Sections at CSS Rule

Frame 4

I’m trying to create an editor like in the picture. Lines 1, 2, 3 and 4 cannot be edited here. It can only be activated/deactivated with the help of the checkbox. And it needs to get which declarations are active or not from an external array. And this array should be able to be changed according to the content.

And after these checkboxed declarations, the user should be able to give their own CSS styles.

Also, the } in the last line should not be deleted.

Thank you in advance for the information that will make my job easier.