<html>
<head>
 <script>
  function modifyStyles(){
    var head = document.getElementsByTagName('head')[0],
        style = document.createElement('style'),
        rules = document.createTextNode(document.forms[0].css.value);
    style.type = 'text/css';
    if(style.styleSheet)
      style.styleSheet.cssText = rules.nodeValue;
    else style.appendChild(rules);
    if(head.children.length<2) head.appendChild(style);
    else head.replaceChild(style, head.children[1]);
  }
  function modifyHTML(){
    document.getElementById("testHTML").innerHTML=document.forms[1].html.value;
  }
 </script>
</head>
<body>
<center>
<table style="text-align:center">
 <tr><td><b>Modify Page CSS</b></td><td><b>Modify Page HTML</b></td></tr>
 <tr>
  <td>
   <form>
    <textarea rows='10' cols='40' name='css'></textarea><br/>
    <button type='button' name='submit' value='submit' onclick='modifyStyles()'>Submit</button>
   </form>
  </td>
  <td>
   <form>
    <textarea rows='10' cols='40' name='html'></textarea><br/>
    <button type='button' name='submit' value='submit' onclick='modifyHTML()'>Submit</button>
   </form>
  </td>
 </tr>
</table>
<b>Test HTML</b><br/>
<div id='testHTML' style='width:750px; min-height:500px;text-align:left; border:1px solid black;'></div>
</center>
</body>
</html>