title: How can I change the ckeditor iframe CSS styling
body: <p>I'm unable to figure out how to modify the CKeditor iframe's <code>body</code> CSS styling. I've tried a bunch of options based on various potential solutions around the web, but I'm not very familiar with CKeditor's API which is making things rather difficult. This is (specifically) CKeditor 4.4.3.</p>
  
  <p>You can see the various attempts (commented) at the following JSfiddle:</p>
  
  <p><a href="http://jsfiddle.net/KS3p4/1/" rel="noreferrer">http://jsfiddle.net/KS3p4/1/</a></p>
  
  <pre><code>CKEDITOR.stylesSet.add( 'style_updates', [
      // ATTEMPT 1
      // Block-level styles...this is for the dropdown menu (not shown in current config)
      { name: 'Body Margin Fix', element: 'body', styles: { margin: '10px' } }
  ]);
  
  editor = $('textarea').ckeditor( function(editor){
      // ATTEMPT 2
      //callback `this` refers to CKEDITOR.editor
      this.ckeditorGet().addCss('body { margin:10px; }')
  }, {
      // ATTEMTP 3
      addCss: 'body { margin:10px; }',
      stylesSet: 'styles_updates',
      uiColor: '#FFFFFF',
      scayt_autoStartup: true,
      autoGrow_onStartup: true,
      enterMode: CKEDITOR.ENTER_BR,
      removePlugins: 'elementspath, resize',
      toolbar: [
          { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline' ] },
          { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'PasteFromWord', 'Undo', 'Redo' ] },
          { name: 'links', items: [ 'Link', 'Unlink' ] },
          { name: 'editing', groups: [ 'spellchecker' ], items: [ 'Scayt' ] },
          { name: 'tools', items: [ 'Maximize' ] }
      ]
  // ATTEMPT 4
  }).ckeditorGet().addCss('body { margin:10px; }');
  </code></pre>