Визуальный, редактируемый блок стилей CSS

Простейший визуальный редактор фактических стилей страницы с помощью HTML5

HTML

<h1>Редактируемый, визуальный блок стилей CSS</h1>

<form>
   <input name="name" placeholder="Укажите ваше имя!" class="textbox" required />
   <input name="emailaddress" placeholder="Укажите ваш Email!" class="textbox" type="email" required />
   <textarea rows="4" cols="50" name="subject" placeholder="Введите ваше сообщение:" class="message" required></textarea>
   <input name="submit" class="button" type="submit" value="Отправить" />
</form>

<pre>
  <style class="edit-css" contenteditable="true">
  body {
    padding:2em;
    line-height: 1.5;  
    font-size: 14px;  
    font-family: Helvetica,sans-serif;  
  }
  
  h1 {
    font-size: 22px;  
    color:#c00;
    text-shadow: 1px 1px 2px #ddd;  
  }
  h2 {
    font-size: 18px;  
    color:#1da000;
    text-shadow: 1px 1px 2px #ddd;  
  }
  .edit-css {
    display:block;
    background:#ddd;
    border:1px solid #777;
    font-family:monospace;
    height:15em;
    resize:both;
    overflow:auto;
  }
  .edit-css:focus {
    background:#eee;
    outline:none;
  }
  .button {
    background: #6e98e3;
    color: #fff;
    padding: 14px;
    text-align: center;
    text-decoration: none;  
  }
  .button:hover {
    background: #333;
  }      
  </style>
</pre>
<p style="text-align: center;"><a class="button" href="http://dbmast.ru/category/snippety">Сниппеты</a></p>