Edit in JSFiddle

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

<p>А знаете ли вы, что тег <strong>style</strong> является по сути таким же блочным элементом? Он так же как и другие может быть отображен на странице! Дальше всё просто, используя атрибут HTML5 <b>contenteditable</b> в теге <strong>style</strong>, добавим ему возможность редактировать фактические стили на странице. Для этого поместите <strong> style</strong>  со всем содержимым между тегами <strong> pre</strong>, что сохранит пробелы для удобного чтения и редактирования. 
</p>

<h2>Попробуйте отредактировать или добавить некоторые стили в блоке ниже!</h2>

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