How can I add a CSS editor inside my HTML page

Question

I'm creating a web page where user can add their custom CSS. As of now I'm using plain text area but it is not parsing new lines and css properties properly. Which is the best way I can create a panel to read and validate CSS inside my HTML page

My current form is like this

<div class="form-group" style="min-height: 300px;">
     <label for="cssString" class="control-label col-sm-4">
          Enter CSS
     </label>
     <div class="col-sm-8">
          <textarea class="form-control" id="cssString" name="customCssData" cols="5" rows="15"> `+ customCss + ` </textarea>
     </div>
</div>

Answer 1

Use a content editable, visible, style tag.

Note : This is a partial answer, because I cannot figure out the bug with new styles.

In the example below you can use the content editable style tag, to change 'green' to 'blue' and see the document update. This might be related to stack overflow snippets, but I could not add a new style for the spans to change anything.

 style { display: block; }

 <h1> Heading </h1> <span> Something else</span> <pre> <style contenteditable="true"> h1 { color: green; } </style> </pre>